{% load avatar_tags i18n %}

<script type="text/template" id="my-repos-toolbar-tmpl">
    <button class="repo-create btn-white hidden-sm-down repo-create-btn"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
    <span aria-label="{% trans "New Library" %}" class="hidden-md-up repo-create sf2-icon-plus2 mobile-icon"></span>
    <div id="my-libs-more-op" class="sf-dropdown sf-dropdown-inline hidden-sm-down">
        <button class="sf-dropdown-toggle btn-white more-op-btn-white">{% trans "More" %}</button>
        <ul class="sf-dropdown-menu hide">
            <li><a href="#my-libs/deleted/">{% trans "Deleted Libraries" %}</a></li>
        </ul>
    </div>
</script>

<script type="text/template" id="create-repo-tmpl">
    <form id="repo-create-form" action="" method="post">{% csrf_token %}
        <h3 id="dialogTitle">{% trans "New Library"%}</h3>
        <label for="repo-name">{% trans "Name"%}</label><br/>
        <input id="repo-name" type="text" name="repo_name" value="" maxlength="{{max_file_name}}" class="input" /><br />
        <% if (app.pageOptions.is_pro && library_templates.length > 0) { %>
        <label for="library-template">{% trans "Template"%}</label><br/>
        <select name="library_template" id="library-template" class="select">
            <% for (var i = 0, len = library_templates.length; i < len; i++) { %>
            <option value="<%- library_templates[i] %>"><%- library_templates[i] %></option>
            <% } %>
        </select>
        <br/>
        <% } %>
        <% if (!$.isEmptyObject(app.pageOptions.storages)) { %>
        <% if (app.pageOptions.storages.length > 1) { %>
        <label for="storage">{% trans "Storage backend"%}</label><br/>
        <select name="storage" id="storage" class="select">
            <% for (var i = 0, len = app.pageOptions.storages.length; i < len; i++) { %>
            <option value="<%- app.pageOptions.storages[i].storage_id %>"><%- app.pageOptions.storages[i].storage_name %></option>
            <% } %>
        </select>
        <br/>
        <% } else if (app.pageOptions.storages.length = 1) { %>
        <select name="storage" id="storage" class="select hide">
            <option value="<%- app.pageOptions.storages[0].storage_id %>"><%- app.pageOptions.storages[0].storage_name %></option>
        </select>
        <br/>
        <% } %>
        <% } %>
        <% if (showSharePerm) { %>
        <label for="share-permission">{% trans "Share Permission" %}</label><br />
        <select id="share-permission" name="permission" class="select">
            <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
            <option value="r">{% trans "Read-Only" %}</option>
        </select>
        <br />
        <% } %>
        <% if (enable_encrypted_library) { %>
        <div class="repo-create-encryption">
            <label class="checkbox-label">
                <input type="checkbox" name="encryption" id="encrypt-switch" class="vam" />
                <span class="checkbox-option vam">{% trans "Encrypt" %}</span>
            </label>
            <label for="passwd">{% trans "Password" %}</label><span class="tip">{% blocktrans %}(at least {{repo_password_min_length}} characters){% endblocktrans %}</span><br />
            <input type="password" name="passwd" disabled="disabled" class="input input-disabled" id="passwd" /><br />
            <label for="passwd-again">{% trans "Password again" %}</label><br />
            <input type="password" name="passwd_again" disabled="disabled" class="input input-disabled" id="passwd-again" />
        </div>
        <% } %>
        <p class="error hide"></p>
        <input type="submit" value="{% trans "Submit"%}" class="submit" />
    </form>
</script>

<script type="text/template" id="create-department-repo-tmpl">
    <form id="repo-create-form" action="" method="post">{% csrf_token %}
        <h3 id="dialogTitle">{% trans "New Department Library"%}</h3>
        <label for="repo-name">{% trans "Name"%}</label><br/>
        <input id="repo-name" type="text" name="repo_name" value="" maxlength="{{max_file_name}}" class="input" /><br />
        <p class="error hide"></p>
        <input type="submit" value="{% trans "Submit"%}" class="submit" />
    </form>
</script>

<script type="text/template" id="add-lib-label-form-tmpl">
<form action="" method="">
    <h3 id="dialogTitle">{% trans "Label current state" %}</h3>
    <input type="hidden" name="labels" class="w100" />
    <p class="error hide"></p>
    <button type="submit" class="submit">{% trans "Submit" %}</button>
</form>
</script>
<script type="text/template" id="repo-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <% if (name) { %>
    <td><span class="repo-name-span"><a href="#my-libs/lib/<%= id %>" class="normal"><%- name %></a></span></td>
    <td class="repo-op-td">
        <div class="op-container">
            <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon vh" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
            <a href="#" class="sf2-icon-delete sf2-x repo-delete-btn op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
            <div class="sf-dropdown sf-dropdown-inline">
                <a href="#" class="sf2-icon-caret-down more-op-icon op-icon vh sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                <ul class="hidden-op repo-hidden-op hide sf-dropdown-menu">
                    <li><a class="op js-repo-rename" href="#">{% trans "Rename" %}</a></li>
                    <li><a class="op js-repo-transfer" href="#">{% trans "Transfer" %}</a></li>
                    <li><a class="op js-popup-history-setting" href="#">{% trans "History Setting" %}</a></li>
                    <% if (encrypted) { %>
                    <li><a class="op js-repo-change-password" href="#">{% trans "Change Password" %}</a></li>
                    <% } %>
                    <% if (!encrypted && (can_generate_share_link || can_generate_upload_link)) { %>
                    <li><a class="op js-popup-share-link-admin" href="#">{% trans "Share Links" %}</a></li>
                    <% } %>
                    <% if (app.pageOptions.folder_perm_enabled) { %>
                    <li><a class="op js-popup-folder-perm-admin" href="#">{% trans "Folder Permission" %}</a></li>
                    <% } %>
                    <li><a class="op js-repo-details" href="#">{% trans "Details" %}</a></li>
                    <% if (app.pageOptions.enable_repo_snapshot_label) { %>
                    <li><a class="op js-add-label" href="#">{% trans "Label current state" %}</a></li>
                    <% } %>
                </ul>
            </div>
        </div>
    </td>
    <% } else { %>
    <td>{% trans "Broken (please contact your administrator to fix this library)" %}</td>
    <td></td>
    <% } %>
    <td><%= size_formatted %></td>
    <% if (app.pageOptions.storages.length > 0) { %>
    <td><%- storage_name %></td>
    <% } %>
    <td><%= mtime_relative %></td>
</script>
<script type="text/template" id="repo-mobile-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <% if (name) { %>
    <td>
        <span class="repo-name-span">
            <a href="#my-libs/lib/<%= id %>" class="normal"><%- name %></a><br />
            <span class="repo-meta-info"><%= size_formatted %></span>
            <span class="repo-meta-info"><%= mtime_relative %></span>
        </span>
    </td>
    <td class="repo-op-td">
        <div class="op-container">
            <a href="#" class="mobile-menu-control sf2-icon-caret-down more-op-icon op-icon sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
            <div class="mobile-menu-container" style="display:none">
                <div class="mobile-menu-mask"></div>
                <div class="mobile-menu-content">
                    <ul>
                        <li><a href="#" class="repo-share-btn op">{% trans "Share" %}</a></li>
                        <li><a href="#" class="repo-delete-btn op">{% trans "Delete" %}</a></li>
                        <li><a class="op js-repo-rename" href="#">{% trans "Rename" %}</a></li>
                        <li><a class="op js-repo-transfer" href="#">{% trans "Transfer" %}</a></li>
                        <li><a class="op js-popup-history-setting" href="#">{% trans "History Setting" %}</a></li>
                        <% if (encrypted) { %>
                        <li><a class="op js-repo-change-password" href="#">{% trans "Change Password" %}</a></li>
                        <% } %>
                        <% if (!encrypted && (can_generate_share_link || can_generate_upload_link)) { %>
                        <li><a class="op js-popup-share-link-admin" href="#">{% trans "Share Links" %}</a></li>
                        <% } %>
                        <% if (app.pageOptions.folder_perm_enabled) { %>
                        <li><a class="op js-popup-folder-perm-admin" href="#">{% trans "Folder Permission" %}</a></li>
                        <% } %>
                        <li><a class="op js-repo-details" href="#">{% trans "Details" %}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </td>
    <% } else { %>
    <td>{% trans "Broken (please contact your administrator to fix this library)" %}</td>
    <td></td>
    <% } %>
</script>

<script type="text/template" id="repo-details-tmpl">
    <div class="details-panel-hd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon"></a>
        <h3 class="details-panel-title">
            <img src="<%= icon_url %>" width="24" alt="" class="vam" />
            <span class="vam ellipsis details-panel-item-name" title="<%- name %>"><%- name %></span>
        </h3>
    </div>
    <div class="details-panel-con">
        <div class="details-panel-img-container image-file-view">
            <img src="<%= big_icon_url %>" width="96" alt="" />
        </div>

        <div class="details-panel-text-info-container">
            <table>
                <tr class="vh">
                    <th width="35%"></th>
                    <td width="65%"></td>
                </tr>
                <tr>
                    <th>{% trans "Files" %}</th>
                    <td id="file-count"><span class="loading-icon"></span></td>
                </tr>
                <tr>
                    <th>{% trans "Size" %}</th>
                    <td><%= size_formatted %></td>
                </tr>
                <tr>
                    <th>{% trans "Last Update" %}</th>
                    <td><%= mtime_relative %></td>
                </tr>
            </table>
        </div>

    </div>
</script>

<script type="text/template" id="deleted-repo-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <td><%- repo_name %></td>
    <td><span title="<%= time %>"><%= time_from_now %></span></td>
    <td>
        <a href="#" class="sf2-icon-reply sf2-x restore op-icon vh" title="{% trans "Restore" %}" aria-label="{% trans "Restore" %}"></a>
    </td>
</script>
<script type="text/template" id="deleted-repo-mobile-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <td>
        <span class="repo-name-span">
            <%- repo_name %><br />
            <span class="repo-meta-info" title="<%= time %>"><%= time_from_now %></span>
        </span>
    </td>
    <td>
        <a href="#" class="sf2-icon-reply sf2-x restore op-icon" title="{% trans "Restore" %}" aria-label="{% trans "Restore" %}"></a>
    </td>
</script>

<script type="text/template" id="groups-toolbar-tmpl">
    {% if user.permissions.can_add_group %}
    <button id="add-group" class="btn-white hidden-sm-down"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "New Group" %}</span></button>
    <span id="add-group" class="sf2-icon-plus2 mobile-icon hidden-md-up" aria-label="{% trans "New Group" %}"></span>
    {% endif %}
</script>
<script type="text/template" id="add-group-form-tmpl">
    <form id="group-add-form" action="" method="post" class="hide">{% csrf_token %}
        <h3 id="dialogTitle">{% trans "New Group" %}</h3>
        <label for="group-name">{% trans "Name" %}</label><br />
        <input type="text" name="group_name" value="" class="input" id="group-name" /><br />
        <p class="error hide"></p>
        <input type="submit" class="submit" value="{% trans "Submit" %}" />
    </form>
</script>

<script type="text/template" id="group-repo-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <td><span class="repo-name-span"><a href="#group/<%= group_id %>/lib/<%= id %>" class="normal"><%- name %></a></span></td>
    <td class="repo-op-td">
        <% if (app.pageOptions.is_pro) { %>
            <% if (!is_group_owned_repo) { %>
                <% if (is_repo_owner || is_admin) { %>
                    <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon vh" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
                <% } %>
                <% if (is_staff || is_repo_owner || is_admin) { %>
                    <a href="#" class="sf2-icon-x3 sf2-x cancel-share op-icon vh" title="{% trans "Unshare" %}" aria-label="{% trans "Unshare" %}"></a>
                <% } %>

            <% } else { %> {# for group owned repo #}
                <% if (is_staff) { %>
                <% if (owner == group_id + '@seafile_group') { %> {# this repo belongs to the current group #}
                    <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon vh" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
                    <a href="#" class="sf2-icon-delete sf2-x delete-repo op-icon vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
                    <div class="sf-dropdown sf-dropdown-inline">
                        <a href="#" class="sf2-icon-caret-down more-op-icon op-icon vh sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                        <ul class="hidden-op repo-hidden-op hide sf-dropdown-menu">
                            <li><a class="op js-repo-rename" href="#">{% trans "Rename" %}</a></li>
                            <% if (app.pageOptions.folder_perm_enabled) { %>
                            <li><a class="op js-set-repo-perm" href="#">{% trans "Folder Permission" %}</a></li>
                            <% } %>
                            <li><a class="op js-repo-details" href="#">{% trans "Details" %}</a></li>
                        </ul>
                    </div>
                <% } else { %>
                    <a href="#" class="sf2-icon-x3 sf2-x cancel-share op-icon vh" title="{% trans "Unshare" %}" aria-label="{% trans "Unshare" %}"></a>
                <% } %>
                <% } %>
            <% } %>

        <% } else { %>
            <% if (is_repo_owner) { %>
                <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon vh" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
            <% } %>
            <% if (is_staff || is_repo_owner) { %>
                <a href="#" class="sf2-icon-x3 sf2-x cancel-share op-icon vh" title="{% trans "Unshare" %}" aria-label="{% trans "Unshare" %}"></a>
            <% } %>
        <% } %>
    </td>
    <td><%= size_formatted %></td>
    <td><%= mtime_relative %></td>
    <% if (show_repo_owner) { %>
    <td><span title="<%- owner_name %>"><%- owner_name %></span></td>
    <% } %>
</script>
<script type="text/template" id="group-repo-mobile-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <td>
        <span class="repo-name-span">
            <a href="#group/<%= group_id %>/lib/<%= id %>" class="normal"><%- name %></a><br />
            <% if (show_repo_owner) { %>
            <span class="repo-meta-info" title="<%- owner_name %>"><%- owner_name %></span>
            <% } %>
            <span class="repo-meta-info"><%= size_formatted %></span>
            <span class="repo-meta-info"><%= mtime_relative %></span>
        </span>
    </td>
    <td class="repo-op-td">
        <% if (app.pageOptions.is_pro) { %>
            <% if (!is_group_owned_repo) { %>
            <div class="sf-dropdown sf-dropdown-inline">
                <a href="#" class="sf2-icon-caret-down more-op-icon op-icon sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                <ul class="hidden-op repo-hidden-op hide sf-dropdown-menu">
                    <% if (is_repo_owner || is_admin) { %>
                    <li><a href="#" class="op repo-share-btn">{% trans "Share" %}</a></li>
                    <% } %>
                    <% if (is_staff || is_repo_owner || is_admin) { %>
                    <li><a href="#" class="op cancel-share">{% trans "Unshare" %}</a></li>
                    <% } %>
                </ul>
            </div>

            <% } else { %>
                <% if (is_staff) { %>
                    <% if (owner == group_id + '@seafile_group') { %> {# this repo belongs to the current group #}
                    <div class="sf-dropdown sf-dropdown-inline">
                        <a href="#" class="sf2-icon-caret-down more-op-icon op-icon sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                        <ul class="hidden-op repo-hidden-op hide sf-dropdown-menu">
                            <li><a class="op repo-share-btn" href="#">{% trans "Share" %}</a></li>
                            <li><a class="op delete-repo" href="#">{% trans "Delete" %}</a></li>
                            <li><a class="op js-repo-rename" href="#">{% trans "Rename" %}</a></li>
                            <% if (app.pageOptions.folder_perm_enabled) { %>
                            <li><a class="op js-set-repo-perm" href="#">{% trans "Folder Permission" %}</a></li>
                            <% } %>
                            <li><a class="op js-repo-details" href="#">{% trans "Details" %}</a></li>
                        </ul>
                    </div>
                    <% } else { %>
                    <div class="sf-dropdown sf-dropdown-inline">
                        <a href="#" class="sf2-icon-caret-down more-op-icon op-icon sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                        <ul class="hidden-op repo-hidden-op hide sf-dropdown-menu">
                            <li><a href="#" class="op cancel-share">{% trans "Unshare" %}</a></li>
                        </ul>
                    </div>
                    <% } %>
                <% } %>
            <% } %>

        <% } else { %>
            <div class="sf-dropdown sf-dropdown-inline">
                <a href="#" class="sf2-icon-caret-down more-op-icon op-icon sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                <ul class="hidden-op repo-hidden-op hide sf-dropdown-menu">
                    <% if (is_repo_owner) { %>
                    <li><a href="#" class="op repo-share-btn">{% trans "Share" %}</a></li>
                    <% } %>
                    <% if (is_staff || is_repo_owner) { %>
                    <li><a href="#" class="op cancel-share">{% trans "Unshare" %}</a></li>
                    <% } %>
                </ul>
            </div>

        <% } %>
    </td>
</script>


<script type="text/template" id="org-repos-toolbar-tmpl">
    {% if can_add_public_repo %}
    <div class="sf-dropdown js-add-pub-lib-dropdown">
        <button class="btn-white sf-dropdown-toggle hidden-sm-down"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Add Library"%}</span></button>
        <span aria-label="{% trans "Add Library" %}" class="hidden-md-up sf-dropdown-toggle sf2-icon-plus2 mobile-icon"></span>
        <ul class="sf-dropdown-menu hide">
            <li><a class="op share-existing" href="#">{% trans "Share existing libraries" %}</a></li>
            <li><a class="op create-new" href="#">{% trans "Create a new library" %}</a></li>
        </ul>
    </div>
    {% endif %}
</script>
<script type="text/template" id="organization-repo-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <td><a href="#org/lib/<%= id %>" class="normal"><%- name %></a></td>
    <td class="alc">
        <% if (app.pageOptions.is_staff || owner == app.pageOptions.username) { %>
            <a href="#" class="sf2-icon-delete sf2-x cancel-share op-icon vh" title="{% trans "Unshare" %}"></a>
        <% } %>
    </td>
    <td><%- size_formatted %></td>
    <td><%= mtime_relative %></td>
    <td><span><%- owner_nickname %></span></td>
</script>
<script type="text/template" id="organization-repo-mobile-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <td>
        <a href="#org/lib/<%= id %>" class="normal"><%- name %></a><br />
        <span class="repo-meta-info"><%- size_formatted %></span>
        <span class="repo-meta-info"><%= mtime_relative %></span>
        <span class="repo-meta-info"><%- owner_nickname %></span>
    </td>
    <td class="alc">
        <% if (app.pageOptions.is_staff || owner == app.pageOptions.username) { %>
            <a href="#" class="sf2-icon-delete sf2-x cancel-share op-icon" title="{% trans "Unshare" %}"></a>
        <% } %>
    </td>
</script>

<script type="text/template" id="dir-view-toolbar-tmpl">
    <% if (user_perm == 'rw') { %>
    <div id="multi-dirents-op" class="hide">
        <button id="mv-dirents" title="{% trans 'Move' %}" class="op-btn sf2-icon-move op-icon btn-white hidden-sm-down"></button>
        <span id="mv-dirents" aria-label="{% trans 'Move' %}" class="sf2-icon-move mobile-icon hidden-md-up"></span>
        <button id="cp-dirents" title="{% trans 'Copy' %}" class="op-btn sf2-icon-copy op-icon btn-white hidden-sm-down"></button>
        <span id="cp-dirents" aria-label="{% trans 'Copy' %}" class="sf2-icon-copy mobile-icon hidden-md-up"></span>
        <button id="del-dirents" title="{% trans 'Delete' %}" class="op-btn sf2-icon-delete op-icon btn-white hidden-sm-down"></button>
        <span id="del-dirents" aria-label="{% trans 'Delete' %}" class="sf2-icon-delete mobile-icon hidden-md-up"></span>
        <button id="download-dirents" title="{% trans 'Download' %}" class="op-btn sf2-icon-download op-icon btn-white hidden-sm-down"></button>
        <span id="download-dirents" aria-label="{% trans 'Download' %}" class="sf2-icon-download mobile-icon hidden-md-up"></span>
    </div>
    <% } %>
    <% if (!encrypted && user_perm == 'r') { %>
    <div id="multi-dirents-op" class="hide">
        <button id="cp-dirents" title="{% trans 'Copy' %}" class="op-btn sf2-icon-copy op-icon btn-white"></button>
        <span id="cp-dirents" aria-label="{% trans 'Copy' %}" class="sf2-icon-copy mobile-icon hidden-md-up"></span>
        <button id="download-dirents" title="{% trans 'Download' %}" class="op-btn sf2-icon-download op-icon btn-white"></button>
        <span id="download-dirents" aria-label="{% trans 'Download' %}" class="sf2-icon-download mobile-icon hidden-md-up"></span>
    </div>
    <% } %>

    <div id="cur-dir-ops">
    <% if (user_perm == 'rw') { %>
    <% if (!no_quota) { %>
    <div id="basic-upload" class="inline-block">
        <button class="basic-upload-btn btn-white hidden-sm-down">{% trans "Upload" %}</button>
        <span class="basic-upload-btn sf2-icon-upload mobile-icon hidden-md-up" aria-label="{% trans "Upload" %}"></span>
        <!--[if lt IE 10]>
        <input class="basic-upload-input" type="file" name="file" multiple />
        <![endif]-->
        <input class="basic-upload-input hide" type="file" name="file" multiple />
    </div>
    <% if (app.pageOptions.enable_upload_folder) { %>
    <div id="advanced-upload" class="sf-dropdown sf-dropdown-inline">
        <button class="sf-dropdown-toggle btn-white hidden-sm-down">{% trans "Upload" %}</button>
        <span class="sf-dropdown-toggle sf2-icon-upload mobile-icon hidden-md-up" aria-label="{% trans "Upload" %}"></span>
        <ul id="upload-menu" class="sf-dropdown-menu hide">
            <li>
                <a class="op advanced-upload-file" href="#">{% trans "Upload Files" %}</a>
                <input id="advanced-upload-file-input" class="hide" type="file" name="file" multiple />
            </li>
            <li>
                <a class="op advanced-upload-folder" href="#">{% trans "Upload Folder" %}</a>
                <input id="advanced-upload-folder-input" class="hide" type="file" name="file" multiple directory webkitdirectory />
            </li>
        </ul>
    </div>
    <% } %>
    <% } else { %>
    <button class="op-btn btn-disabled hidden-sm-down" disabled="disabled" title="{% trans "Out of quota." %}">{% trans "Upload" %}</button>
    <% } %>
    <div id="add-new" class="sf-dropdown sf-dropdown-inline">
        <button class="sf-dropdown-toggle btn-white hidden-sm-down">{% trans "New" %}</button>
        <span class="sf2-icon-plus2 sf-dropdown-toggle hidden-md-up mobile-icon" aria-label="{% trans "New" %}"></span>
        <div class="sf-dropdown-menu hide">
            <ul>
                <li><a id="add-new-dir" class="op" href="#">{% trans "New Folder" %}</a></li>
                <li><a id="add-new-file" class="op" href="#">{% trans "New File" %}</a></li>
            </ul>
            <div class="menu-inner-divider"></div>
            <ul id="new-file-menu">
                <li><a id="add-new-md-file" class="op" href="#">{% trans "New Markdown File" %}</a></li>
                <li><a id="add-new-excel-file" class="op" href="#">{% trans "New Excel File" %}</a></li>
                <li><a id="add-new-ppt-file" class="op" href="#">{% trans "New PowerPoint File" %}</a></li>
                <li><a id="add-new-word-file" class="op" href="#">{% trans "New Word File" %}</a></li>
            </ul>
        </div>
    </div>
    <% } %>

    <% if (can_share) { %>
    <button class="btn-white hidden-sm-down" id="share-cur-dir">{% trans "Share" %}</button>
    <span class="sf2-icon-share hidden-md-up mobile-icon" id="share-cur-dir" aria-label="{% trans "Share" %}"></span>
    <% } %>
    </div><!-- div#cur-dir-ops ends here -->

    <div class="switch-mode hidden-sm-down">
        <button class="view-btn list-view-icon-btn sf2-icon-list-view <% if (mode == 'list') { %>active<% } %>" title="{% trans "List" %}" id="js-switch-list-view" aria-label="{% trans "list view" %}"></button>
        <button class="view-btn grid-view-icon-btn sf2-icon-grid-view <% if (mode == 'grid') { %>active<% } %>" title="{% trans "Grid" %}" id="js-switch-grid-view" aria-label="{% trans "grid view" %}"></button>
    </div>
</script>
<script type="text/template" id="dir-view-toolbar2-tmpl">
    <% if (path == '/') { %>
        <% if (user_perm == 'rw') { %>
        <a class="op-link sf2-icon-trash" href="<%= site_root %>repo/recycle/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}" aria-label="{% trans "Trash" %}"></a>
        <% } %>
        <a class="op-link sf2-icon-history" href="<%= site_root %>repo/history/<%- repo_id %>/?referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'History' %}" aria-label="{% trans "History" %}"></a>
    <% } else { %>
        <% if (user_perm == 'rw') { %>
        <a class="op-link sf2-icon-trash" href="<%= site_root %>dir/recycle/<%- repo_id %>/?dir_path=<% print(encodeURIComponent(path)); %>&referer=<% print(encodeURIComponent(location.href)); %>" title="{% trans 'Trash' %}"></a>
        <% } %>
    <% } %>
</script>
<script type="text/template" id="dir-view-path-tmpl">
    <% if (context == 'group') { %>
        <a href="#groups/" class="path-link normal">{% trans "Groups" %}</a>
        <span class="path-split">/</span>
        <a href="#<%= category %>/" class="path-link normal"><%- group_name %></a>
    <% } else if (context == 'org') { %>
        <a href="#<%= category %>/" class="path-link normal">{% trans "Shared with all" %}</a>
    <% } else if (context == 'common') { %>
        <a href="#my-libs/" class="path-link normal">{% trans "My Libraries" %}</a>
    <% } else { %>
        <a href="#<%= category %>/" class="path-link normal"><% if (category == 'my-libs') { %>{% trans "My Libraries" %}<% } %><% if (category == 'shared-libs') { %>{% trans "Shared with me" %}<% } %></a>
    <% } %>
    <span class="path-split">/</span>
    <% if (path == '/') { %>
        <%- repo_name %>
    <% } else { %>
        <a href="#<%= category %>/lib/<%= repo_id %>/" class="path-link normal"><%- repo_name %></a>
        <span class="path-split">/</span>
        <% for (var i = 0,len = path_list.length - 1; i < len; i++) { %>
        <a href="#<%= category %>/lib/<%= repo_id %>/<% print(path_list_encoded.slice(0, i+1).join('/')); %>" class="path-link normal"><%- path_list[i] %></a>
        <span class="path-split">/</span>
        <% } %>
        <%- path_list[i] %>
    <% } %>
</script>
<script type="text/template" id="dir-view-thead-tmpl">
    <tr>
        <th width="3%" class="select">
            <input type="checkbox" class="vam" />
        </th>
        <th width="3%" class="star"></th>
        <th width="5%" class="dirent-icon"></th>
        <th width="45%"><a class="table-sort-op by-name" href="#"><span class="dirent-name">{% trans "Name"%} <span class="sort-icon icon-caret-up"></span></span></a></th>
        <th width="20%" class="dirent-op"><span class="sr-only">{% trans "Actions" %}</span></th>
        <th width="11%" class="dirent-size">{% trans "Size"%}</th>
        <th width="13%" class="dirent-update"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a></th>
    </tr>
</script>
<script type="text/template" id="dir-view-thead-mobile-tmpl">
    <tr>
        <th width="4%" class="select">
            <input type="checkbox" class="vam" />
        </th>
        <th width="6%" class="star"></th>
        <th width="8%" class="dirent-icon"></th>
        <th width="74%">
            {% trans "Sort:"%}
            <a class="table-sort-op mobile-table-sort-op by-name" href="#"><span class="dirent-name">{% trans "name"%} <span class="sort-icon icon-caret-up"></span></span></a>
            <a class="table-sort-op mobile-table-sort-op by-time" href="#">{% trans "last update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a>
        </th>
        <th width="8%" class="dirent-op"><span class="sr-only">{% trans "Actions" %}</span></th>
    </tr>
</script>


<script type="text/template" id="dirent-dir-tmpl">
    <td class="select">
        <% if (dirent.selected) { %>
        <input type="checkbox" class="vam" checked="checked" />
        <% } else { %>
        <input type="checkbox" class="vam" />
        <% } %>
    </td>
    <td class="star"></td>
    <td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="" /></td>
    <td>
        <span class="dirent-name"><a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
        <span class="dirent-smart-link sf2-icon-link" title="{% trans 'Internal link' %}"></span>
    </td>
    <td class="dirent-op">
        <div class="op-container">
            <div class="displayed-op">
                <% if (dirent.perm == 'rw' || dirent.perm == 'r') { %>
                <a class="op-icon download sf2-icon-download sf2-x vh download-dir" href="#" title="{% trans "Download" %}" aria-label="{% trans "Download" %}"></a>
                <% } %>

                <% if (can_share_dir) { %>
                    <a href="#" class="op-icon share sf2-icon-share sf2-x vh" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
                <% } %>
                <% if (dirent.perm == 'rw') { %>
                    <a href="#" class="op-icon delete sf2-icon-delete sf2-x vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
                <% } %>
            </div>
            <% if (dirent.perm == 'rw') { %>
            <div class="sf-dropdown sf-dropdown-inline">
                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                <div class="hide sf-dropdown-menu">
                    <ul>
                        <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
                        <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
                        <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                    </ul>
                    <div class="menu-inner-divider"></div>
                    <ul>
                        <% if (can_set_folder_perm) { %>
                        <li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
                        <% } %>
                        <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                    </ul>
                    <div class="menu-inner-divider"></div>
                    <ul>
                        <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path + '/')); %>">{% trans "Open via Client" %}</a></li>
                    </ul>
                </div>
            </div>
            <% } else if (dirent.perm == 'r') { %>
            <div class="sf-dropdown sf-dropdown-inline">
                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                <ul class="hide sf-dropdown-menu">
                    <% if (!repo_encrypted) { %>
                    <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                    <% } %>
                    <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                </ul>
            </div>
            <% } %>
        </div>
    </td>
    <td class="dirent-size"></td>
    <td class="dirent-update">
        <% if (dirent.last_modified) { %>
        <%= dirent.last_update %>
        <% } %>
    </td>
</script>
<script type="text/template" id="dirent-dir-mobile-tmpl">
    <td class="select">
        <% if (dirent.selected) { %>
        <input type="checkbox" class="vam" checked="checked" />
        <% } else { %>
        <input type="checkbox" class="vam" />
        <% } %>
    </td>
    <td class="star"></td>
    <td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="" /></td>
    <td>
        <span class="dirent-name">
        <a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a>
        <span class="dirent-smart-link sf2-icon-link" title="{% trans 'Internal link' %}"></span>
        <br />
        <% if (dirent.last_modified) { %>
        <span class="dirent-meta-info"><%= dirent.last_update %></span>
        <% } %>
        </span>
    </td>
    <td class="dirent-op">
        <div class="op-container">
            <a href="#" class="mobile-menu-control more-op-icon sf2-icon-caret-down op-icon sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
            <div class="mobile-menu-container" style="display:none">
                <div class="mobile-menu-mask"></div>
                <div class="mobile-menu-content">
                    <ul>
                        <% if (dirent.perm == 'rw' || dirent.perm == 'r') { %>
                        <li><a class="op download download-dir" href="#">{% trans "Download" %}</a></li>
                        <% } %>
                        <% if (can_share_dir) { %>
                        <li><a href="#" class="op share">{% trans "Share" %}</a></li>
                        <% } %>
                        <% if (dirent.perm == 'rw') { %>
                        <li><a href="#" class="op delete">{% trans "Delete" %}</a></li>
                        <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
                        <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
                        <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                        <% } %>
                        <% if (dirent.perm == 'r') { %>
                            <% if (!repo_encrypted) { %>
                            <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                            <% } %>
                        <% } %>
                    </ul>
                    <ul>
                    <% if (dirent.perm == 'rw') { %>
                        <% if (can_set_folder_perm) { %>
                        <li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
                        <% } %>
                        <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                    <% } else if (dirent.perm == 'r') { %>
                        <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                    <% } %>
                    </ul>
                </div>
            </div>
        </div>
    </td>
</script>

<script type="text/template" id="dirent-file-tmpl">
    <td class="select">
        <% if (dirent.selected) { %>
        <input type="checkbox" class="vam" checked="checked" />
        <% } else { %>
        <input type="checkbox" class="vam" />
        <% } %>
    </td>
    <td class="star alc">
        <% if (dirent.starred) { %>
        <a href="#" title="{% trans "starred" %}" class="icon-star file-star" aria-label="{% trans "starred" %}"></a>
        <% } else { %>
        <a href="#" title="{% trans "unstarred" %}" class="icon-star-empty file-star" aria-label="{% trans "unstarred" %}"></a>
        <% } %>
    </td>
    <td class="dirent-icon">
        <div class="pos-rel">
        <% if (dirent.is_img || dirent.is_xmind || dirent.is_video) { %>
            <% if (dirent.encoded_thumbnail_src) { %>
            <img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
            <% } else { %>
            <img src="<%= icon_url %>" width="24" alt="" />
            <% } %>
        <% } else { %>
        <img src="<%= icon_url %>" width="24" alt="" />
        <% } %>

        <% if (is_pro && dirent.is_locked) { %>
        <img class="file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
        <% } %>
        </div>
    </td>
    <td>
        <span class="dirent-name">
            <% if (dirent.is_img) { %>
            <a class="normal img-name-link" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
            <% } else { %>
            <a class="normal" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
            <% } %>
        </span>
        <span class="dirent-smart-link sf2-icon-link" title="{% trans 'Internal link' %}"></span>
    </td>
    <td class="dirent-op">
        <div class="op-container">
            <div class="displayed-op">
                <% if (dirent.perm == 'rw' || dirent.perm == 'r') { %>
                <a class="op-icon download sf2-icon-download sf2-x vh" href="<%= download_url %>" title="{% trans "Download" %}" aria-label="{% trans "Download" %}"></a>
                <% } %>

                <% if (can_share_file) { %>
                <a href="#" class="op-icon share sf2-icon-share sf2-x vh" title="{% trans "Share" %}" aria-label="{% trans "Share" %}"></a>
                <% } %>
                <% if (dirent.perm == 'rw') { %>
                <% if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) { %>
                    <a href="#" class="op-icon delete sf2-icon-delete sf2-x vh" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}"></a>
                <% } %>
                <% } %>
            </div>
            <% if (dirent.perm == 'rw') { %>
            <div class="sf-dropdown sf-dropdown-inline">
                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon vh sf-dropdown-toggle" title="{% trans "More Operations"%}" aria-label="{% trans "More Operations" %}"></a>
                <div class="hide sf-dropdown-menu">
                    <ul>
                        <% if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) { %>
                        <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
                        <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
                        <% } %>
                        <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                        <% if (is_pro) { %>
                            <% if (dirent.is_locked) { %>
                                <% if (dirent.locked_by_me) { %>
                                <li><a class="op unlock-file" href="#">{% trans "Unlock" %}</a></li>
                                <% } %>
                            <% } else { %>
                            <li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li>
                            <% } %>
                        <% } %>
                        <li><a class="op new-draft" href="#">{% trans "New Draft" %}</a></li>
                    </ul>
                    <div class="menu-inner-divider"></div>
                    <ul>
                        <% if (app.pageOptions.enable_file_comment) { %>
                        <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                        <% } %>
                        <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>&referer=<% print(encodeURIComponent(location.href)); %>">{% trans "History" %}</a></li>
                        <% if (is_pro && file_audit_enabled) { %>
                        <li><a class="op" href="{{ SITE_ROOT }}repo/file-access/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "Access Log" %}</a></li>
                        <% } %>
                        <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                    </ul>
                    <div class="menu-inner-divider"></div>
                    <ul>
                        <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path)); %>">{% trans "Open via Client" %}</a></li>
                    </ul>
                </div>
            </div>
            <% } else if (dirent.perm == 'r') { %>
            <div class="sf-dropdown sf-dropdown-inline">
                <a class="more-op-icon sf2-icon-caret-down op-icon vh sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                <ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
                    <% if (!repo_encrypted) { %>
                    <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                    <% } %>
                    <% if (app.pageOptions.enable_file_comment) { %>
                    <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                    <% } %>
                    <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>&referer=<% print(encodeURIComponent(location.href)); %>">{% trans "History" %}</a></li>
                    <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                </ul>
            </div>
            <% } else if (dirent.perm == 'cloud-edit' || dirent.perm == 'preview') { %>
            <div class="sf-dropdown sf-dropdown-inline">
                <a class="more-op-icon sf2-icon-caret-down op-icon vh sf-dropdown-toggle" title="{% trans "More Operations" %}" aria-label="{% trans "More Operations" %}"></a>
                <ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
                    <% if (app.pageOptions.enable_file_comment) { %>
                    <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                    <% } %>
                    <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>&referer=<% print(encodeURIComponent(location.href)); %>">{% trans "History" %}</a></li>
                    <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                </ul>
            </div>
            <% } %>
        </div>
    </td>
    <td class="dirent-size"><%= dirent.file_size %></td>
    <td class="dirent-update">
        <% if (dirent.last_modified) { %>
        <%= dirent.last_update %>
        <% } else { %>
        <% print("{% trans "Fetch failed" %}"); %>
        <% } %>
    </td>
</script>

<script type="text/template" id="dirent-file-mobile-tmpl">
    <td class="select">
        <% if (dirent.selected) { %>
        <input type="checkbox" class="vam" checked="checked" />
        <% } else { %>
        <input type="checkbox" class="vam" />
        <% } %>
    </td>
    <td class="star alc">
        <% if (dirent.starred) { %>
        <a href="#" title="{% trans "starred" %}" class="icon-star file-star" aria-label="{% trans "starred" %}"></a>
        <% } else { %>
        <a href="#" title="{% trans "unstarred" %}" class="icon-star-empty file-star" aria-label="{% trans "unstarred" %}"></a>
        <% } %>
    </td>
    <td class="dirent-icon">
        <div class="pos-rel">
        <% if (dirent.is_img || dirent.is_video) { %>
            <% if (dirent.encoded_thumbnail_src) { %>
            <img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
            <% } else { %>
            <img src="<%= icon_url %>" width="24" alt="" />
            <% } %>
        <% } else { %>
        <img src="<%= icon_url %>" width="24" alt="" />
        <% } %>

        <% if (is_pro && dirent.is_locked) { %>
        <img class="file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
        <% } %>
        </div>
    </td>
    <td>
        <span class="dirent-name">
            <% if (dirent.is_img) { %>
            <a class="normal img-name-link" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
            <span class="dirent-smart-link sf2-icon-link" title= "{% trans 'Internal link' %}"></span>
            <% } else { %>
            <a class="normal" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
            <span class="dirent-smart-link sf2-icon-link" title= "{% trans 'Internal link' %}"></span>
            <br />
            <% } %>
            <span class="dirent-meta-info"><%= dirent.file_size %></span>
            <span class="dirent-meta-info">
            <% if (dirent.last_modified) { %>
                <%= dirent.last_update %>
            <% } else { %>
                <% print("{% trans "Fetch failed" %}"); %>
            <% } %>
            </span>
        </span>
    </td>
    <td class="dirent-op">
        <div class="op-container">
            <a href="#" class="mobile-menu-control more-op-icon sf2-icon-caret-down op-icon sf-dropdown-toggle" title="{% trans "More Operations"%}" aria-label="{% trans "More Operations" %}"></a>
            <div class="mobile-menu-container" style="display:none">
                <div class="mobile-menu-mask"></div>
                <div class="mobile-menu-content">
                <ul>
                <% if (dirent.perm == 'rw' || dirent.perm == 'r') { %>
                <li><a class="op download download-close-menu" href="<%= download_url %>">{% trans "Download" %}</a></li>
                <% } %>
                <% if (can_share_file) { %>
                <li><a class="op share" href="#">{% trans "Share" %}</a></li>
                <% } %>
                <% if (dirent.perm == 'rw') { %>
                <% if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) { %>
                <li><a class="op delete" href="#">{% trans "Delete" %}</a></li>
                <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
                <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
                <% } %>
                <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                    <% if (is_pro) { %>
                    <% if (dirent.is_locked) { %>
                        <% if (dirent.locked_by_me) { %>
                        <li><a class="op unlock-file" href="#">{% trans "Unlock" %}</a></li>
                        <% } %>
                    <% } else { %>
                    <li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li>
                    <% } %>
                    <% } %>
                <% } %>

                <% if (dirent.perm == 'r') { %>
                    <% if (!repo_encrypted) { %>
                    <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                    <% } %>
                <% } %>
                <li><a class="op new-draft" href="#">{% trans "New Draft" %}</a></li>
                </ul>
                <!-- <div class="menu-inner-divider"></div> -->
                <ul>
                <% if (dirent.perm == 'rw') { %>
                    <% if (app.pageOptions.enable_file_comment) { %>
                    <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                    <% } %>
                    <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>">{% trans "History" %}</a></li>
                    <% if (is_pro) { %>
                        <% if (file_audit_enabled) { %>
                    <li><a class="op" href="{{ SITE_ROOT }}repo/file-access/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "Access Log" %}</a></li>
                        <% } %>
                    <% } %>
                    <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                <% } else if (dirent.perm == 'r' || dirent.perm == 'cloud-edit' || dirent.perm == 'preview') { %>
                    <% if (app.pageOptions.enable_file_comment) { %>
                    <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                    <% } %>
                    <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>">{% trans "History" %}</a></li>
                    <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
                <% } %>
                </ul>
            </div>
        </div>
    </td>
</script>


<script type="text/template" id="grid-view-file-item-tmpl">
    <a href="<%= url %>" class="img-link" target="_blank">
        <% if ((dirent.is_img || dirent.is_video) && dirent.encoded_thumbnail_src) { %>
            <img class="thumbnail vam" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
        <% } else { %>
            <img src="<%= icon_url %>" width="96" alt="" class="vam" />
        <% } %>

        <% if (is_pro && dirent.is_locked) { %>
        <img class="grid-file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
        <% } %>
    </a>

    <a href="<%= url %>" class="ellipsis text-link normal" target="_blank">
        <%- dirent.obj_name %>
    </a>
</script>

<script type="text/template" id="grid-view-dir-item-tmpl">
    <a href="<%= url %>" class="img-link">
        <img src="<%= icon_url %>" alt="" width="96" class="vam" />
    </a>

    <a href="<%= url %>" class="ellipsis normal text-link">
        <%- dirent.obj_name %>
    </a>
</script>

<script type="text/template" id="grid-view-file-op-tmpl">
    <div class="grid-item-op sf-dropdown-menu">
        <ul>
            <% if (dirent.perm == 'rw' || dirent.perm == 'r') { %>
            <li><a class="op download" href="<%= download_url %>">{% trans "Download" %}</a></li>
            <% } %>

            <% if (can_share_file) { %>
            <li><a class="op share" href="#">{% trans "Share" %}</a></li>
            <% } %>
            <% if (dirent.perm == 'rw') { %>
            <% if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) { %>
            <li><a class="op delete" href="#">{% trans "Delete" %}</a></li>
            <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
            <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
            <% } %>
            <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                <% if (is_pro) { %>
                    <% if (dirent.is_locked) { %>
                        <% if (dirent.locked_by_me) { %>
                        <li><a class="op unlock-file" href="#">{% trans "Unlock" %}</a></li>
                        <% } %>
                    <% } else { %>
                    <li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li>
                    <% } %>
                <% } %>
            <% } else if (dirent.perm == 'r') { %>
                <% if (!repo_encrypted) { %>
                <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                <% } %>
            <% } %>
        </ul>

        <div class="menu-inner-divider"></div>
        <ul>
            <% if (dirent.perm == 'rw') { %>
            <% if (app.pageOptions.enable_file_comment) { %>
            <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
            <% } %>
            <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>&referer=<% print(encodeURIComponent(location.href)); %>">{% trans "History" %}</a></li>
                <% if (is_pro && file_audit_enabled) { %>
                <li><a class="op" href="{{ SITE_ROOT }}repo/file-access/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "Access Log" %}</a></li>
                <% } %>
            <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>

            <% } else if (dirent.perm == 'r' || dirent.perm == 'cloud-edit' || dirent.perm == 'preview') { %>
                <% if (app.pageOptions.enable_file_comment) { %>
                <li><a class="op file-comment" href="#">{% trans "Comment" %}</a><li>
                <% } %>
                <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>&referer=<% print(encodeURIComponent(location.href)); %>">{% trans "History" %}</a></li>
                <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
            <% } %>
        </ul>

        <% if (dirent.perm == 'rw') { %>
        <div class="menu-inner-divider"></div>
        <ul>
            <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%= repo_id %>&path=<% print(encodeURIComponent(dirent_path)); %>">{% trans "Open via Client" %}</a></li>
        </ul>
        <% } %>
    </div>
</script>

<script type="text/template" id="grid-view-dir-op-tmpl">
    <div class="grid-item-op sf-dropdown-menu">
        <ul>
            <% if (dirent.perm == 'rw' || dirent.perm == 'r') { %>
            <li><a class="op download-dir" href="#">{% trans "Download" %}</a></li>
            <% } %>

            <% if (can_share_dir) { %>
            <li><a class="op share" href="#">{% trans "Share" %}</a></li>
            <% } %>

            <% if (dirent.perm == 'rw') { %>
            <li><a class="op delete" href="#">{% trans "Delete" %}</a></li>
            <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
            <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
            <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
            <% } else if (dirent.perm == 'r') { %>
                <% if (!repo_encrypted) { %>
                <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
                <% } %>
            <% } %>
        </ul>

        <div class="menu-inner-divider"></div>
        <ul>
        <% if (dirent.perm == 'rw') { %>
            <% if (can_set_folder_perm) { %>
            <li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
            <% } %>
            <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
        <% } else if (dirent.perm == 'r') { %>
            <li><a class="op view-details" href="#">{% trans "Details" %}</a></li>
        <% } %>
        </ul>

        <% if (dirent.perm == 'rw') { %>
        <div class="menu-inner-divider"></div>
        <ul>
            <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%= repo_id %>&path=<% print(encodeURIComponent(dirent_path)); %>">{% trans "Open via Client" %}</a></li>
        </ul>
        <% } %>
    </div>
</script>

<script type="text/template" id="dirent-details-tmpl">
    <div class="details-panel-hd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon"></a>
        <h3 class="details-panel-title">
            <img src="<%= icon_url %>" width="24" alt="" class="vam" />
            <span class="vam ellipsis details-panel-item-name" title="<%- dirent.obj_name %>"><%- dirent.obj_name %></span>
        </h3>
    </div>
    <div class="details-panel-con">
        <div class="details-panel-img-container image-file-view">
            <span class="loading-icon"></span>
            <% if (thumbnail_url) { %>
            <img src="<%= thumbnail_url %>" class="thumbnail hide" alt="" />
            <% } else { %>
            <img src="<%= big_icon_url %>" width="96" class="hide" alt="" />
            <% } %>
        </div>

        <div class="details-panel-text-info-container">
            <% if (dirent.is_file) { %>
            <table>
                <tr class="vh">
                    <th width="35%"></th>
                    <td width="65%"></td>
                </tr>
                <tr>
                    <th>{% trans "Size" %}</th>
                    <td><%= dirent.file_size %></td>
                </tr>
                <tr>
                    <th>{% trans "Location" %}</th>
                    <td><%- path %></td>
                </tr>
                <% if (dirent.last_modified) { %>
                <tr>
                    <th>{% trans "Last Update" %}</th>
                    <td><%= dirent.last_update %></td>
                </tr>
                <% } %>
                <% if (dirent.perm == 'rw') { %>
                <tr>
                    <th class="tags-label">{% trans "Tags" %}</th>
                    <td class="tags-container">
                        <span class="loading-icon"></span>
                        <ul class="cur-tags hide ovhd"></ul>
                        <span class="sf2-icon-edit tags-edit-icon op-icon hide" title="{% trans "Edit" %}"></span>
                        <input type="hidden" class="w100 hide tags-input" />
                        <button class="submit tags-submit-btn hide">{% trans "Submit" %}</button>
                        <p class="error hide"></p>
                    </td>
                </tr>
                <% } %>
            </table>

            <% } else { %>
            <p class="loading-icon loading-tip"></p>
            <p class="error hide"></p>
            <table class="hide">
                <tr class="vh">
                    <th width="35%"></th>
                    <td width="65%"></td>
                </tr>
                <tr>
                    <th>{% trans "Location" %}</th>
                    <td><%- path %></td>
                </tr>
                <% if (dirent.last_modified) { %>
                <tr>
                    <th>{% trans "Last Update" %}</th>
                    <td><%= dirent.last_update %></td>
                </tr>
                <% } %>
                <% if (dirent.perm == 'rw') { %>
                <tr>
                    <th class="tags-label">{% trans "Tags" %}</th>
                    <td class="tags-container">
                        <span class="loading-icon"></span>
                        <ul class="cur-tags hide ovhd"></ul>
                        <span class="sf2-icon-edit tags-edit-icon op-icon hide" title="{% trans "Edit" %}"></span>
                        <input type="hidden" class="w100 hide tags-input" />
                        <button class="submit tags-submit-btn hide">{% trans "Submit" %}</button>
                        <p class="error hide"></p>
                    </td>
                </tr>
                <% } %>
            </table>
            <% } %>
        </div>
    </div>
</script>

<script type="text/template" id="share-popup-tmpl">
    <h3 class="hd" id="dialogTitle"><%= title %></h3>
    <div id="share-tabs" class="nav-con-tabs">
        <ul class="nav-con-tabs-nav">
            <% if (!repo_encrypted && can_generate_share_link) { %>
            <li class="tab"><a href="#download-link-share" class="a">{% trans "Share Link" %}</a></li>
            <% } %>
            <% if (is_dir) { %>
                <% if (user_perm == 'rw' && !repo_encrypted && can_generate_upload_link) { %>
            <li class="tab" id="dir-upload-link-tab"><a href="#dir-upload-link-share" class="a">{% trans "Upload Link" %}</a></li>
                <% } %>

                <% if (enable_dir_private_share) { %> {# dir private share #}
            <li class="tab"><a href="#dir-user-share" class="a">{% trans "Share to user" %}</a></li>
            <li class="tab"><a href="#dir-group-share" class="a">{% trans "Share to group" %}</a></li>
                <% } %>
            <% } %>
        </ul>

        <div class="nav-con-tabs-content">
            <span class="loading-icon loading-tip"></span>
            <% if (!repo_encrypted && can_generate_share_link) { %>
            <div id="download-link-share" class="tabs-panel">
                <form id="generate-download-link-form" action="" class="hide">

                    <label class="checkbox-label">
                        <input type="checkbox" name="use_passwd" class="vam" />
                        <span class="checkbox-option vam">{% trans "Add password protection"%}</span>
                    </label>
                    <div class="hide link-option-content">
                        <label for="passwd">{% trans "Password" %}</label><span class="tip">{% blocktrans %}(at least {{share_link_password_min_length}} characters){% endblocktrans %}</span>
                        <div class="passwd-wrapper">
                            <input type="password" name="password" class="passwd input" id="passwd" />
                            <span title="{% trans "Show" %}" class="icon-eye show-or-hide-password cspt" role="button" tabindex="0" aria-label="{% trans "Show" %}"></span>
                            <span title="{% trans "Generate a random password" %}" class="icon-magic generate-random-password cspt" role="button" tabindex="0" aria-label="{% trans "Generate a random password" %}"></span>
                        </div>
                        <label for="passwd-again">{% trans "Password again" %}</label><br />
                        <input type="password" name="password_again" class="input" id="passwd-again" />
                    </div>

                    {% if share_link_expire_days_min > 0 or share_link_expire_days_max > 0 %}
                    <label class="checkbox-label">
                        <input type="checkbox" checked="checked" disabled="disabled" name="set_expiration" class="vam" />
                        <span class="checkbox-option vam">{% trans "Add auto expiration"%}</span>
                        <div class="link-option-content inline-block vam">
                            <input type="text" name="expire_days" value="{{ share_link_expire_days_default }}" class="input short-input" id="expire-days" />
                            <span>{% trans "days" %}</span>
                            <span>
                                {% if share_link_expire_days_min > 0 and share_link_expire_days_max > 0 %}
                                {% blocktrans %}({{ share_link_expire_days_min }} - {{ share_link_expire_days_max }} days){% endblocktrans %}
                                {% elif share_link_expire_days_min > 0 %}
                                {% blocktrans %}(Greater than or equal to {{share_link_expire_days_min}} days){% endblocktrans %}
                                {% elif share_link_expire_days_max > 0 %}
                                {% blocktrans %}(Less than or equal to {{share_link_expire_days_max}} days){% endblocktrans %}
                                {% endif %}
                            </span>
                        </div>
                    </label>

                    {% else %}
                    <label class="checkbox-label">
                        <input type="checkbox" name="set_expiration" class="vam link-expiration-checkbox" />
                        <span class="checkbox-option vam">{% trans "Add auto expiration"%}</span>
                        <div class="link-option-content inline-block vam">
                            <input type="text" name="expire_days" class="input short-input input-disabled" disabled="disabled" />
                            <span>{% trans "days" %}</span>
                        </div>
                    </label>
                    {% endif %}

                    <% if (app.pageOptions.is_pro) { %>
                    <label class="checkbox-label">
                        <input type="checkbox" checked="checked" disabled="disabled" name="set_permission" class="vam" />
                        <span class="checkbox-option vam">{% trans "Set permission" %}</span>
                    </label>
                    <div class="link-option-content">
                        <label class="radio-item">
                            <input type="radio" name="permission" value="preview_download" checked="checked" class="vam" />
                            <span class="vam">{% trans "Preview and download" %}</span>
                        </label><br />
                        <label id="share-link-preview-only-radio" class="radio-item">
                            <input type="radio" name="permission" value="preview_only" class="vam" />
                            <span class="vam">{% trans "Preview only" %}</span>
                        </label><br />
                        <label id="share-link-edit-download-radio" class="radio-item hide">
                            <input type="radio" name="permission" value="edit_download" class="vam" />
                            <span class="vam">{% trans "Edit on cloud and download" %}</span>
                        </label>
                    </div>
                    <% } %>

                    <p class="error hide"></p>
                    <input type="submit" value="{% trans "Generate" %}" class="gen-link-btn" />
                </form>
                <div id="download-link-operations" class="hide">
                    <dl>
                        <dt>{% trans "Link: " %}</dt>
                        <dd id="download-link">
                            <span class="link-placeholder"></span>
                            <input type="text" readonly="readonly" value="" class="shared-link hide" />
                            <span class="shared-link-copy-icon icon-copy" title="{% trans "Copy" %}"></span>
                        </dd>
                        <% if (!is_dir) { %>
                        <dt>{% trans "Direct Download Link: " %}</dt>
                        <dd id="direct-dl-link">
                            <span class="link-placeholder"></span>
                            <input type="text" readonly="readonly" value="" class="shared-link hide" />
                            <span class="shared-link-copy-icon icon-copy" title="{% trans "Copy" %}"></span>
                        </dd>
                        <% } %>
                        <dt id="share-link-expire-date-label" class="hide">{% trans "Expiration Date: " %}</dt>
                        <dd id="share-link-expire-date" class="hide"></dd>
                    </dl>
                    {% if user.permissions.can_send_share_link_mail %}
                        <button id="send-download-link">{% trans 'Send' %}</button>
                    {% endif %}
                    <button id="delete-download-link">{% trans 'Delete' %}</button>
                    <div id="delete-download-link-confirm" class="alert alert-warning hide">
                        <h4 class="alert-heading">{% trans "Are you sure you want to remove the share link?"%}</h4>
                        <p style="margin-bottom:1rem;">{% trans "If the share link is removed, no one will be able to access it any more."%}</p>
                        <button id="delete-download-link-yes">{% trans 'Yes' %}</button>
                        <button id="delete-download-link-cancel">{% trans 'No' %}</button>
                    </div>
                    <form id="send-download-link-form" action="" class="hide">
                        <label for="email">{% trans "Send to:"%}</label><br />
                        <input type="text" class="input" name="email" placeholder="{% trans "Emails, separated by ','"%}" title="{% trans "Emails, separated by ','"%}" id="email" /><br />
                        <label for="extra-msg">{% trans "Message (optional):"%}</label><br />
                        <textarea class="textarea" name="extra_msg" id="extra-msg"></textarea><br />
                        <p class="error hide"></p>
                        <input type="submit" value="{% trans "Submit" %}" class="submit" />
                        <input type="button" value="{% trans "Cancel"%}" class="cancel" id="cancel-share-download-link" />
                        <p class="sending-tip hide">{% trans "Sending..."%}</p>
                    </form>
                </div>
                <p class="error hide"></p>
            </div>
            <% } %>

            <% if (is_dir) { %>
                <% if (user_perm == 'rw' && !repo_encrypted && can_generate_upload_link) { %>
            <div id="dir-upload-link-share" class="tabs-panel hide">
                <p class="tip hide">{% trans "You can share the generated link to others and then they can upload files to this directory via the link." %}</p>
                <form id="generate-upload-link-form" action="" class="hide">
                    <label class="checkbox-label">
                        <input type="checkbox" name="use_passwd" class="vam" />
                        <span class="checkbox-option vam">{% trans "Add password protection"%}</span>
                    </label>
                    <div class="hide link-option-content">
                        <label for="u-passwd">{% trans "Password" %}</label><span class="tip">{% blocktrans %}(at least {{share_link_password_min_length}} characters){% endblocktrans %}</span>
                        <div class="passwd-wrapper">
                            <input type="password" name="password" class="passwd input" id="u-passwd" />
                            <span title="{% trans "Show" %}" class="icon-eye show-or-hide-password cspt" role="button" tabindex="0" aria-label="{% trans "Show" %}"></span>
                            <span title="{% trans "Generate a random password" %}" class="icon-magic generate-random-password cspt" role="button" tabindex="0" aria-label="{% trans "Generate a random password" %}"></span>
                        </div>
                        <label for="u-passwd-again">{% trans "Password again"%}</label><br />
                        <input type="password" name="password_again" class="input" id="u-passwd-again" />
                    </div>
                    <p class="error hide"></p>
                    <input type="submit" value="{% trans "Generate" %}" class="gen-link-btn" />
                </form>
                <div id="upload-link-operations" class="hide">
                    <dl>
                        <dt>{% trans "Upload Link: " %}</dt>
                        <dd id="upload-link">
                            <span class="link-placeholder"></span>
                            <input type="text" readonly="readonly" value="" class="shared-link hide" />
                            <span class="shared-link-copy-icon icon-copy" title="{% trans "Copy" %}"></span>
                        </dd>
                    </dl>
                    {% if user.permissions.can_send_share_link_mail %}
                        <button id="send-upload-link">{% trans 'Send' %}</button>
                    {% endif %}
                    <button id="delete-upload-link">{% trans 'Delete' %}</button>
                    <form id="send-upload-link-form" action="" class="hide">
                        <label for="u-email">{% trans "Send to:"%}</label><br />
                        <input type="text" class="input" name="email" placeholder="{% trans "Emails, separated by ','"%}" title="{% trans "Emails, separated by ','"%}" id="u-email" /><br />
                        <label for="u-extra-msg">{% trans "Message (optional):"%}</label><br />
                        <textarea class="textarea" name="extra_msg" id="u-extra-msg"></textarea><br />
                        <p class="error hide"></p>
                        <input type="submit" value="{% trans "Submit" %}" class="submit" />
                        <input type="button" value="{% trans "Cancel"%}" class="cancel" id="cancel-share-upload-link" />
                        <p class="sending-tip hide">{% trans "Sending..."%}</p>
                    </form>
                </div>
                <p class="error hide"></p>
            </div>
                <% } %>

                <% if (enable_dir_private_share) { %> {# dir private share #}
                    <% if (!repo_encrypted) { %>
            <div id="dir-user-share" class="tabs-panel hide">
                    <% } else { %>
            <div id="dir-user-share" class="tabs-panel">
                    <% } %>
                <table class="hide">
                    <thead>
                    <tr>
                        <th width="55%">{% trans "User" %}</th>
                        <th width="30%">{% trans "Permission" %}</th>
                        <th width="15%"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="add-dir-user-share-item">
                        <td>
                            <input type="hidden" name="emails" class="w100" />
                        </td>
                        <td>
                            <select name="permission" class="share-permission-select w100">
                                <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
                                <option value="r">{% trans "Read-Only" %}</option>
                                <% if (show_admin_perm_option) { %>
                                <option value="admin">{% trans "Admin" %}</option>
                                <% } %>
                                {% if is_pro %}
                                <option value="cloud-edit">{% trans "Preview-Edit-on-Cloud" %}</option>
                                <option value="preview">{% trans "Preview-on-Cloud" %}</option>
                                {% endif %}
                            </select>
                        </td>
                        <td><input type="submit" value="{% trans "Submit" %}" class="submit" /></td>
                    </tr>
                    </tbody>
                </table>
                {% if enable_guest_invitation and user.permissions.can_invite_guest %}
                <a href="{{ SITE_ROOT }}#invitations/" class="invite-link-in-popup">
                    <span aria-hidden="true" class="sf2-icon-invite vam"></span>
                    <span class="vam">{% trans "Invite People" %}</span>
                </a>
                {% endif %}
                <p class="error hide"></p>
            </div>

            <div id="dir-group-share" class="tabs-panel hide">
                <table class="hide">
                    <thead>
                    <tr>
                        <th width="55%">{% trans "Group" %}</th>
                        <th width="30%">{% trans "Permission" %}</th>
                        <th width="15%"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="add-dir-group-share-item">
                        <td>
                            <select name="groups" class="w100" multiple="multiple"></select>
                        </td>
                        <td>
                            <select name="permission" class="share-permission-select w100">
                                <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
                                <option value="r">{% trans "Read-Only" %}</option>
                                <% if (show_admin_perm_option) { %>
                                <option value="admin">{% trans "Admin" %}</option>
                                <% } %>
                                {% if is_pro %}
                                <option value="cloud-edit">{% trans "Preview-Edit-on-Cloud" %}</option>
                                <option value="preview">{% trans "Preview-on-Cloud" %}</option>
                                {% endif %}
                            </select>
                        </td>
                        <td><input type="submit" value="{% trans "Submit" %}" class="submit" /></td>
                    </tr>
                    </tbody>
                </table>
                <p class="error hide"></p>
            </div>
                <% } %> {# end of 'dir private share' #}
            <% } %> {# if is_dir #}

        </div>
    </div>
</script>
<script type="text/template" id="shared-repo-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <td><a href="#shared-libs/lib/<%= id %>" class="normal"><%- name %></a></td>
    <td class="alc">
        <% if (app.pageOptions.is_pro && is_admin) { %>
        <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon vh" title="{% trans "Share" %}"></a>
        <% } %>
        <a href="#" class="sf2-icon-delete sf2-x unshare-btn op-icon vh" title="{% trans "Leave Share" %}"></a>
    </td>
    <td><%= size_formatted %></td>
    <td><%= mtime_relative %></td>
    <td><span title="<%- owner_name_shown %>"><%- owner_name_shown %></span></td>
</script>
<script type="text/template" id="shared-repo-mobile-tmpl">
    <td>
        <img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" />
    </td>
    <td>
        <a href="#shared-libs/lib/<%= id %>" class="normal"><%- name %></a><br />
        <span class="repo-meta-info" title="<%- owner_name_shown %>"><%- owner_name_shown %></span>
        <span class="repo-meta-info"><%= size_formatted %></span>
        <span class="repo-meta-info"><%= mtime_relative %></span>
    </td>
    <td class="alc">
        <% if (app.pageOptions.is_pro && is_admin) { %>
        <a href="#" class="sf2-icon-share sf2-x repo-share-btn op-icon" title="{% trans "Share" %}"></a>
        <% } %>
        <a href="#" class="sf2-icon-delete sf2-x unshare-btn op-icon" title="{% trans "Leave Share" %}"></a>
    </td>
</script>


<script type="text/template" id="side-nav-tmpl">
    <div class="side-nav-con">
    <h3 class="hd">{% trans "Files" %}</h3>
    <ul class="side-tabnav-tabs">
        {% if user.permissions.can_add_repo %}
        <li class="tab<% if (cur_tab == 'mine') { %> tab-cur<% } %>">
            <a href="{{ SITE_ROOT }}my-libs/" class="ellipsis" title="{% trans "My Libraries" %}"><span aria-hidden="true" class="sf2-icon-user"></span>{% trans "My Libraries" %}</a>
        </li>
        {% endif %}

        <li class="tab<% if (cur_tab == 'shared') { %> tab-cur<% } %>">
            <a href="{{ SITE_ROOT }}shared-libs/" class="ellipsis" title="{% trans "Shared with me" %}"><span aria-hidden="true" class="sf2-icon-share"></span>{% trans "Shared with me" %}</a>
        </li>

        {% if user.permissions.can_view_org %}
        <li class="tab<% if (cur_tab == 'org') { %> tab-cur<% } %>">
            <a href="{{ SITE_ROOT }}#org/" class="ellipsis" title="{% trans "Shared with all" %}"><span aria-hidden="true" class="sf2-icon-organization"></span>{% trans "Shared with all" %}</a>
        </li>
        {% endif %}

        <% if (cur_tab == 'group') { %>
        <li class="tab" id="group-nav">
            <a href="#" class="ellipsis" title="{% trans "Shared with groups" %}"><span aria-hidden="true" class="toggle-icon icon-caret-down fright"></span><span aria-hidden="true" class="sf2-icon-group"></span>{% trans "Shared with groups" %}</a>
            <ul class="grp-list">
                <li<% if (cur_group_tab == 'groups') { %> class="tab-cur"<% }%>><a href="{{ SITE_ROOT }}groups/"><span class="sharp" aria-hidden="true">#</span>{% trans "All Groups" %}</a></li>
                <% for (var i = 0, len = groups.length; i < len; i++) { %>
                    <% if (cur_group_id == groups[i].id) { %>
                    <li class="tab-cur">
                    <% } else { %>
                    <li>
                    <% } %>
                <a class="ellipsis" href="{{SITE_ROOT}}group/<%= groups[i].id %>/" title="<%- groups[i].name %>"><span class="sharp" aria-hidden="true">#</span><%- groups[i].name %></a>
                </li>
                <% } %>
            </ul>
        </li>
        <% } else { %>
        <li class="tab" id="group-nav">
            <% if (show_group_list) { %>
            <a href="#" class="ellipsis" title="{% trans "Shared with groups" %}"><span class="toggle-icon icon-caret-down fright" aria-hidden="true"></span><span aria-hidden="true" class="sf2-icon-group"></span>{% trans "Shared with groups" %}</a>
            <ul class="grp-list">
            <% } else { %>
            <a href="#" class="ellipsis" title="{% trans "Shared with groups" %}"><span class="toggle-icon icon-caret-left fright" aria-hidden="true"></span><span aria-hidden="true" class="sf2-icon-group"></span>{% trans "Shared with groups" %}</a>
            <ul class="grp-list hide">
            <% } %>
                <li>
                    <a href="{{ SITE_ROOT }}groups/"><span class="sharp" aria-hidden="true">#</span>{% trans "All Groups" %}</a>
                </li>
                <% for (var i = 0, len = groups.length; i < len; i++) { %>
                <li>
                    <a class="ellipsis" href="{{SITE_ROOT}}group/<%= groups[i].id %>/" title="<%- groups[i].name %>"><span class="sharp" aria-hidden="true">#</span><%- groups[i].name %></a>
                </li>
                <% } %>
            </ul>
        </li>
        <% } %>
    </ul>

    <div class="hd w100 ovhd">
        <h3 class="fleft">{% trans "Tools" %}</h3>
        <% if (app.pageOptions.enable_wiki) { %>
        {% if user.permissions.can_add_repo %}
        <a href="#" id="enable-mods" class="sf2-icon-cog2 op-icon enable-mods-icon fright" title="{% trans "Enable Modules" %}" aria-label="{% trans "Enable Modules" %}"></a>
        {% endif %}
        <% } %>
    </div>
    <ul class="side-tabnav-tabs">
        <li class="tab<% if (cur_tab == 'starred') { %> tab-cur<% } %>">
            <a href="{{ SITE_ROOT }}starred/"><span aria-hidden="true" class="sf2-icon-star"></span>{% trans "Favorites" %}</a>
        </li>
        {% if events_enabled %}
        <li class="tab<% if (cur_tab == 'activities') { %> tab-cur<% } %>">
            <a href="{{ SITE_ROOT }}dashboard/"><span aria-hidden="true" class="sf2-icon-clock"></span>{% trans "Activities" %}</a>
        </li>
        {% endif %}

        <% if (app.pageOptions.enable_wiki) { %>
        <% for (var i = 0, len = mods_enabled.length; i < len; i++) { %>
            <% if (mods_enabled[i] == 'personal wiki') { %>
                <li class="tab">
                    <a href="{% url 'wiki:list' %}"><span aria-hidden="true" class="sf2-icon-wiki"></span>{% trans "Wikis" %}</a>
                </li>
            <% } %>
        <% } %>
        <% } %>
        <li class="tab<% if (cur_tab == 'devices') { %> tab-cur<% } %>">
            <a href="{{ SITE_ROOT }}linked-devices/" class="ellipsis" title="{% trans "Linked Devices" %}"><span aria-hidden="true" class="sf2-icon-monitor"></span>{% trans "Linked Devices" %}</a>
        </li>
        {% if enable_guest_invitation and user.permissions.can_invite_guest %}
        <li class="tab<% if (cur_tab == 'invitations') { %> tab-cur<% } %>">
            <a href="{{ SITE_ROOT }}#invitations/"><span aria-hidden="true" class="sf2-icon-invite"></span>{% trans "Invite People" %}</a>
        </li>
        {% endif %}

        <li class="tab<% if (cur_tab == 'drafts') { %> tab-cur<% } %>">
            <a href="{{ SITE_ROOT }}drafts/" class="ellipsis" title="{% trans "Drafts" %}"><span aria-hidden="true" class="sf2-icon-draft"></span>{% trans "Drafts" %}</a>
        </li>

        <li class="tab" id="share-admin-nav">
            <a href="#" class="ellipsis" title="{% trans "Share Admin" %}"><span class="toggle-icon <% if (show_share_admin) { %> icon-caret-down <% } else { %> icon-caret-left <% } %> fright" aria-hidden="true"></span><span aria-hidden="true" class="sf2-icon-wrench"></span>{% trans "Share Admin" %}</a>
            <% if (show_share_admin) { %>
            <ul>
            <% } else { %>
            <ul class="hide">
            <% } %>
                <% if (can_add_repo) { %>
                <li class="<% if (cur_tab == 'share-admin-repos') { %>tab-cur<% } %>">
                    <a href="{{ SITE_ROOT }}share-admin-libs/"><span aria-hidden="true" class="sharp">#</span>{% trans "Libraries" %}</a>
                </li>
                <li class="<% if (cur_tab == 'share-admin-folders') { %>tab-cur<% } %>">
                    <a href="{{ SITE_ROOT }}share-admin-folders/"><span aria-hidden="true" class="sharp">#</span>{% trans "Folders" %}</a>
                </li>
                <% } %>
                <% if (can_generate_share_link) { %>
                <li class="<% if (cur_tab == 'share-admin-links') { %>tab-cur<% } %>">
                    <a href="{{ SITE_ROOT }}share-admin-share-links/"><span aria-hidden="true" class="sharp">#</span>{% trans "Links" %}</a>
                </li>
                <% } else if (can_generate_upload_link) { %>
                <li class="<% if (cur_tab == 'share-admin-links') { %>tab-cur<% } %>">
                    <a href="{{ SITE_ROOT }}share-admin-upload-links/"><span aria-hidden="true" class="sharp">#</span>{% trans "Links" %}</a>
                </li>
                <% } %>
            </ul>
        </li>
    </ul>
    </div>
    <div class="side-nav-footer" role="contentinfo">
        {% include 'nav_footer.html' %}
    </div>
</script>

<script type="text/template" id="myhome-mods-enable-form-tmpl">
<form id="myhome-mods-enable-form" method="post" action="" class="hide">{% csrf_token%}
    <h3 id="dialogTitle">{% trans "Enable Modules"%}</h3>
    <ul>
        <% for (var i = 0, len = mods_available.length; i < len; i++) { %>
            <% if (mods_available[i] == 'personal wiki') { %>
            <li>
            <label class="checkbox-label">
                <% if (mods_enabled.indexOf(mods_available[i]) != -1) { %>
                <input type="checkbox" name="personal_wiki" class="vam" checked="checked" />
                <% } else { %>
                <input type="checkbox" name="personal_wiki" class="vam" />
                <% } %>
                <span class="checkbox-option">{% trans "Wiki" %}</span>
            </label>
            </li>
            <% } %>
        <% } %>
    </ul>
    <input type="submit" value="{% trans "Submit"%}" class="submit" />
</form>
</script>

<script type="text/template" id="group-toolbar-tmpl">
    {% if user.permissions.can_add_repo %}
    <button class="repo-create btn-white hidden-sm-down"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
    <span class="repo-create sf2-icon-plus2 mobile-icon hidden-md-up" aria-label="{% trans "New Library" %}"></span>
    {% endif %}
</script>
<script type="text/template" id="group-path-tmpl">
    <a href="{{ SITE_ROOT }}#groups/" class="normal">{% trans "Groups" %}</a>
    <span class="path-split">/</span>
    <span class="group-name"><%- name %></span>
    <% if (is_address_book_group) { %>
    <span class="address-book-group-icon icon-building" title="{% trans "This is a special group representing a department." %}"></span>
    <% } %>
</script>
<script type="text/template" id="group-toolbar2-tmpl">
    <a href="#" class="sf2-icon-cog1 op-icon group-top-op-icon" title="{% trans "Settings" %}" id="group-settings-icon" aria-label="{% trans "Settings" %}"></a>
    <a href="#" class="sf2-icon-user2 op-icon group-top-op-icon" title="{% trans "Members" %}" id="group-members-icon" aria-label="{% trans "Members" %}"></a>
    <% if (app.pageOptions.enable_group_discussion) { %>
    <a href="#" class="sf2-icon-msgs2 op-icon group-top-op-icon" title="{% trans "Discussion" %}" id="group-discussions-icon" aria-label="{% trans "Discussion" %}"></a>
    <% } %>
</script>

<script type="text/template" id="group-discussions-tmpl">
    <div class="comments-panel-hd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon"></a>
        <h3 class="comments-panel-title">{% trans "Discussions" %}</h3>
    </div>
    <div class="comments-panel-con" id="group-discussions-con">
        <div class="loading-icon loading-tip"></div>
        <p class="load-more-discussion hide js-load-more">{% trans "More..." %}</p>
        <ul id="group-discussion-list" class="hide"></ul>
        <p class="no-discussion-tip hide">{% trans "No discussion in this group yet." %}</p>
        <p class="error hide"></p>
    </div>
    <div class="comments-panel-footer">
        <form action="" method="post" class="msg-form">
            <img src="{% avatar_url request.user 64 %}" alt="" width="32" height="32" class="avatar-circle fleft" />
            <div class="msg-body">
                <textarea name="message" placeholder="{% trans "Add a discussion..." %}" class="msg-input"></textarea>
                <button type="submit" class="submit msg-submit">{% trans "Submit" %}</button>
            </div>
        </form>
    </div>
</script>

<script type="text/template" id="group-settings-tmpl">
    <div class="sf-popover-hd ovhd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fright"></a>
        <h3 class="sf-popover-title">{% trans "Settings" %}</h3>
    </div>
    <div class="sf-popover-con">
    </div>
</script>

<script type="text/template" id="group-members-tmpl">
    <div class="sf-popover-hd ovhd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fright"></a>
        <h3 class="sf-popover-title">{% trans "Members" %}</h3>
    </div>
    <div class="sf-popover-con">
        <div class="loading-icon loading-tip"></div>
        <ul id="group-member-list" class="hide"></ul>
        <p class="error hide"></p>
    </div>
</script>

<script type="text/template" id="folder-perm-item-tmpl">
    <% if (for_user) { %>
    <td><a href="{{ SITE_ROOT }}profile/<% print(encodeURIComponent(user_email)); %>/" target="_blank"><%- user_name %></a></td>
    <% } else { %>
    <td><a href="#group/<%= group_id %>/" target="_blank"><%- group_name %></a></td>
    <% } %>

    <% if (show_folder_path) { %>
    <td><a href="#my-libs/lib/<%= repo_id %><%= encoded_path %>"><%- folder_name %></a></td>
    <% } %>

    <td>
        <div class="perm">
            <span>
                <% if (show_admin && is_admin) { %>
                    {% trans "Admin" %}
                <% } else { %>
                    <% if (permission == 'rw') { %>
                        {% trans "Read-Write" %}
                    <% } else if (permission == 'r') { %>
                        {% trans "Read-Only" %}
                    <% } else if (permission == 'cloud-edit') { %>
                        {% trans "Preview-Edit-on-Cloud" %}
                    <% } else { %>
                        {% trans "Preview-on-Cloud" %}
                    <% } %>
                <% } %>
            </span>
            <a href="#" title="{% trans "Edit" %}" class="perm-edit-icon sf2-icon-edit op-icon vh"></a>
        </div>
        <select class="perm-toggle-select select-white hide w100">
            <% if (show_admin) { %>
                <% if (is_admin) { %>
                    <option value="rw">{% trans "Read-Write" %}</option>
                    <option value="r">{% trans "Read-Only" %}</option>
                    <option value="admin" selected="selected">{% trans "Admin" %}</option>
                    <option value="cloud-edit">{% trans "Preview-Edit-on-Cloud" %}</option>
                    <option value="preview">{% trans "Preview-on-Cloud" %}</option>
                <% } else { %>
                    <option value="rw" <% if (permission == 'rw') { %>selected="selected"<% } %>>{% trans "Read-Write" %}</option>
                    <option value="r" <% if (permission == 'r') { %>selected="selected"<% } %>>{% trans "Read-Only" %}</option>
                    <option value="admin">{% trans "Admin" %}</option>
                    <option value="cloud-edit" <% if (permission == 'cloud-edit') { %>selected="selected"<% } %>>{% trans "Preview-Edit-on-Cloud" %}</option>
                    <option value="preview" <% if (permission == 'preview') { %>selected="selected"<% } %>>{% trans "Preview-on-Cloud" %}</option>
                <% } %>
            <% } else { %>
                <option value="rw" <% if (permission == 'rw') { %>selected="selected"<% } %>>{% trans "Read-Write" %}</option>
                <option value="r" <% if (permission == 'r') { %>selected="selected"<% } %>>{% trans "Read-Only" %}</option>
                {% if is_pro %}
                <option value="cloud-edit" <% if (permission == 'cloud-edit') { %>selected="selected"<% } %>>{% trans "Preview-Edit-on-Cloud" %}</option>
                <option value="preview" <% if (permission == 'preview') { %>selected="selected"<% } %>>{% trans "Preview-on-Cloud" %}</option>
                {% endif %}
            <% } %>
        </select>
    </td>
    <td>
        <a href="#" class="sf2-icon-delete delete-icon op-icon vh" title="{% trans "Delete" %}"></a>
    </td>
</script>
<script type="text/template" id="folder-perm-popup-tmpl">
    <h3 class="hd" id="dialogTitle"><%= title %></h3>
    <div id="folder-perm-tabs" class="nav-con-tabs">
        <ul class="nav-con-tabs-nav">
            <li class="tab"><a href="#user-folder-perm" class="a">{% trans "User Permission" %}</a></li>
            <li class="tab"><a href="#group-folder-perm" class="a">{% trans "Group Permission" %}</a></li>
        </ul>
        <div class="nav-con-tabs-content">
            <div id="user-folder-perm" class="tabs-panel">
                <table>
                    <thead>
                    <tr>
                        <th width="55%">{% trans "User" %}</th>
                        <th width="30%">{% trans "Permission" %}</th>
                        <th width="15%"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="add-user-folder-perm">
                        <td>
                            <input type="hidden" name="email" class="w100" />
                        </td>
                        <td>
                            <select name="permission" class="folder-perm-select w100">
                                <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
                                <option value="r">{% trans "Read-Only" %}</option>
                                {% if is_pro %}
                                <option value="cloud-edit">{% trans "Preview-Edit-on-Cloud" %}</option>
                                <option value="preview">{% trans "Preview-on-Cloud" %}</option>
                                {% endif %}
                            </select>
                        </td>
                        <td><input type="submit" value="{% trans "Submit" %}" class="submit" /></td>
                    </tr>
                    </tbody>
                </table>
                <p class="error hide"></p>
            </div>
            <div id="group-folder-perm" class="tabs-panel">
                <table>
                    <thead>
                    <tr>
                        <th width="55%">{% trans "Group" %}</th>
                        <th width="30%">{% trans "Permission" %}</th>
                        <th width="15%"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="add-group-folder-perm">
                        <td>
                            <select name="group" class="w100" multiple="multiple"></select>
                        </td>
                        <td>
                            <select name="permission" class="folder-perm-select w100">
                                <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
                                <option value="r">{% trans "Read-Only" %}</option>
                                {% if is_pro %}
                                <option value="cloud-edit">{% trans "Preview-Edit-on-Cloud" %}</option>
                                <option value="preview">{% trans "Preview-on-Cloud" %}</option>
                                {% endif %}
                            </select>
                        </td>
                        <td><input type="submit" value="{% trans "Submit" %}" class="submit" /></td>
                    </tr>
                    </tbody>
                </table>
                <p class="error hide"></p>
            </div>
        </div>
    </div>
</script>
<script type="text/template" id="starred-file-thead-tmpl">
    <tr>
        <% if ($(window).width() >= 768) { %>
        <th width="5%"></th>
        <th width="40%">{% trans "File Name" %}</th>
        <th width="32%">{% trans "Library" %}</th>
        <th width="18%">{% trans "Last Update" %}</th>
        <th width="5%"></th>
        <% } else { %>
        <th width="5%"></th>
        <th width="90%">{% trans "File Name" %}</th>
        <th width="5%"></th>
        <% } %>
    </tr>
</script>
<script type="text/template" id="starred-file-item-tmpl">
    <td class="alc">
        <% if (encoded_thumbnail_src) { %>
            <img class="thumbnail" src="{{ SITE_ROOT }}<%= encoded_thumbnail_src %>" alt="" />
        <% } else { %>
            <img src="<%= file_icon_url %>" alt="{% trans "icon" %}" width="24" />
        <% } %>
    </td>
    <td>
        <% if (is_img) { %>
            <a class="img-name-link normal" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank" data-mfp-src="{{ SITE_ROOT }}repo/<%= repo_id %>/raw<%- encoded_path %>"><%- file_name %></a>
        <% } else { %>
            <a class="normal" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank"><%- file_name %></a>
        <% } %>
    </td>
    <td><%- repo_name %></td>
    <td><%= mtime_relative %></td>
    <td>
        <a href="#" class="sf2-icon-delete unstar op-icon vh" title="{% trans "Unstar" %}" aria-label="{% trans "Unstar" %}"></a>
    </td>
</script>
<script type="text/template" id="starred-file-item-mobile-tmpl">
    <td class="alc">
        <% if (encoded_thumbnail_src) { %>
            <img class="thumbnail" src="{{ SITE_ROOT }}<%= encoded_thumbnail_src %>" alt="" />
        <% } else { %>
            <img src="<%= file_icon_url %>" alt="{% trans "icon" %}" width="24" />
        <% } %>
    </td>
    <td>
        <% if (is_img) { %>
            <a class="img-name-link normal" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank" data-mfp-src="{{ SITE_ROOT }}repo/<%= repo_id %>/raw<%- encoded_path %>"><%- file_name %></a>
        <% } else { %>
            <a class="normal" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank"><%- file_name %></a>
        <% } %>
        <br />
        <span class="dirent-meta-info"><%- repo_name %></span>
        <span class="dirent-meta-info"><%= mtime_relative %></span>
    </td>
    <td>
        <a href="#" class="sf2-icon-delete unstar op-icon" title="{% trans "Unstar" %}" aria-label="{% trans "Unstar" %}"></a>
    </td>
</script>


<script type="text/template" id="my-repos-thead-tmpl">
    <tr>
        <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
        <th width="42%"><a class="table-sort-op by-name" href="#">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></a></th>
        <th width="14%"><span class="sr-only">{% trans "Actions" %}</span></th>
    <% if (app.pageOptions.storages.length > 0) { %>
        <th width="10%">{% trans "Size" %}</th>
        <th width="15%">{% trans "Storage backend" %}</th>
        <th width="15%"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-up"></span></a></th>
        <% } else { %>
        <th width="20%">{% trans "Size" %}</th>
        <th width="20%"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-up"></span></a></th>
        <% } %>
    </tr>
</script>
<script type="text/template" id="my-repos-thead-mobile-tmpl">
    <tr>
        <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
        <th width="92%">
            {% trans "Sort:" %}
            <a class="table-sort-op mobile-table-sort-op by-name" href="#">{% trans "name" %} <span class="sort-icon icon-caret-down hide"></a>
            <a class="table-sort-op mobile-table-sort-op by-time" href="#">{% trans "last update" %} <span class="sort-icon icon-caret-up"></span></a>
        <th width="4%"><span class="sr-only">{% trans "Actions" %}</span></th>
    </tr>
</script>

<script type="text/template" id="my-deleted-repos-hd-tmpl">
    <tr>
        <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
        <th width="52%">{% trans "Name" %}</th>
        <th width="30%">{% trans "Deleted Time" %}</th>
        <th width="14%"><span class="sr-only">{% trans "Actions" %}</span></th>
    </tr>
</script>
<script type="text/template" id="my-deleted-repos-hd-mobile-tmpl">
    <tr class="vh">
        <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
        <th width="82%">{% trans "Name" %}{% trans "Deleted Time" %}</th>
        <th width="14%"><span class="sr-only">{% trans "Actions" %}</span></th>
    </tr>
</script>

<script type="text/template" id="shared-repos-hd-tmpl">
    <tr>
        <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
        <th width="38%"><a class="table-sort-op by-name" href="#">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></a></th>
        <th width="10%"><span class="sr-only">{% trans "Actions" %}</span><!--op--></th>
        <th width="14%">{% trans "Size" %}</th>
        <th width="18%"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-up"></span></a></th>
        <th width="16%">{% trans "Owner" %}</th>
    </tr>
</script>
<script type="text/template" id="shared-repos-hd-mobile-tmpl">
    <tr>
        <th width="4%"><span class="sr-only">{% trans "Library Type" %}</span><!--icon--></th>
        <th width="90%">
            {% trans "Sort:" %}
            <a class="table-sort-op mobile-table-sort-op by-name" href="#">{% trans "name" %} <span class="sort-icon icon-caret-down hide"></span></a>
            <a class="table-sort-op mobile-table-sort-op by-time" href="#">{% trans "last update" %} <span class="sort-icon icon-caret-up"></span></a>
        </th>
        <th width="6%"><span class="sr-only">{% trans "Actions" %}</span><!--op--></th>
    </tr>
</script>

<script type="text/template" id="add-pubrepo-popup-tmpl">
    <h3 class="hd" id="dialogTitle">{% trans "Select libraries to share" %}</h3>
    <span class="loading-icon loading-tip"></span>
    <table class="hide">
        <tr>
            <th width="3%"><!--select--></th>
            <th width="6%"><!--icon--></th>
            <th width="35%">{% trans "Name" %}</th>
            <th width="25%">{% trans "Last Update" %}</th>
            <th width="31%">{% trans "Permission" %}</th>
        </tr>
    </table>
    <input type="submit" value="{% trans "Submit"%}" class="submit" />
</script>
<script type="text/template" id="add-pubrepo-item-tmpl">
    <td class="select">
        <input type="checkbox" class="vam" />
    </td>
    <td>
      <% if (encrypted) { %>
      <img src="{{ MEDIA_URL }}img/lib/48/lib-encrypted.png" width="24" title="{% trans "Encrypted" %}" alt="{% trans "Encrypted" %}" />
      <% } else { %>
      <img src="{{ MEDIA_URL }}img/lib/48/lib.png" width="24" title="{% trans "Read-Write" %}" alt="{% trans "Read-Write" %}" />
      <% } %>
    </td>
    <td><a href="#my-libs/lib/<%= id %>" target="_blank"><%- name %></a></td>
    <td><%= mtime_relative %></td>
    <td>
        <select name="permission" class="share-permission-select w100">
            <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
            <option value="r">{% trans "Read-Only" %}</option>
        </select>
    </td>
</script>
<script type="text/template" id="activity-group-hd-tmpl">
    <h4 class="activity-group-hd"><%= date %></h4>
</script>
<script type="text/template" id="activity-group-bd-tmpl">
    <ol class="activity-group-bd"></ol>
</script>
<script type="text/template" id="activity-item-tmpl">
    <%= activity.avatar %>
    <div class="txt">
        <% if (activity.etype == "repo-update") { %>
        <p class="w100 ovhd">
        <a href="#common/lib/<%= activity.repo_id %>/" class="updated-repo normal fright"><%- activity.repo_name %></a>
        <span class="cmt-desc">
            <%= activity.converted_cmmt_desc %>
            <% if (activity.more_files) { %>
                <% if (!activity.repo_encrypted) { %>
                    <a class="lsch cspt">{% trans 'Details' %}</a>
                <% } %>
            <% } %>
        </span>
        </p>
        <% } %>

        <% if (activity.etype == "repo-create") { %>
        <p>{% trans "Created library" %} <a href="#common/lib/<%= activity.repo_id %>/" class="normal"><%- activity.repo_name %></a></p>
        <% } %>

        <% if (activity.etype == "repo-delete") { %>
        <p>{% trans "Deleted library" %} <%- activity.repo_name %></p>
        <% } %>

        <% if (activity.etype == "clean-up-repo-trash") { %>
            <a href="#common/lib/<%= activity.repo_id %>/" class="updated-repo normal fright"><%- activity.repo_name %></a>
            <span class="cmt-desc">
            <%- activity.desc %>
            </span>
        <% } %>

        <p><a class="normal" href="{{ SITE_ROOT }}profile/<% print(encodeURIComponent(activity.author)); %>/"><%- activity.name %></a> <span class="time"><%= activity.time_relative %></span></p>
    </div>
</script>
<script type="text/template" id="details-popup-tmpl">
    <h3 id="dialogTitle">{% trans "Modification Details"%}</h3>
    <p class="commit-time"></p>
    <span class="loading-icon loading-tip"></span>
</script>
<script type="text/template" id="detail-item-tmpl">
    <h4><%= details_title %></h4>
    <ul>
    <% for (var i = 0, len = details.length; i < len; i++) { %>
        <li><%= details[i] %></li>
    <% } %>
    </ul>
</script>
<script type="text/template" id="top-search-form-tmpl">
<% if (search_repo_id) { %>
    <input type="text" class="search-input" name="q" placeholder="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" title="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" aria-label="{% if search_wiki %}{% trans "Search files in this wiki" %}{% else %}{% trans "Search files in this library" %}{% endif %}" value="{{ keyword }}" /> <input type="hidden" name="search_repo" value="<%= search_repo_id %>" />
<% } else { %>
    <input type="text" class="search-input" name="q" placeholder="{% trans "Search Files" %}" title="{% trans "Search Files" %}" aria-label="{% trans "Search Files" %}" value="{{ keyword }}" />
<% } %>
<!--span class="icon-caret-down" title="{% trans "advanced" %}"></span--><button type="submit" class="search-submit" aria-label="{% trans "Submit" %}"><span class="icon-search"></span></button>
</script>
<script type="text/template" id="group-item-tmpl">
    <h4 class="group-name ellipsis"><a href="#group/<%= id %>/" title="<%- name %>" class="a normal"><%- name %></a></h4>
    <% if (repos.length) { %>
    <table>
        <thead class="vh"><!--use .vh for <td> width-->
        <tr>
            <th width="4%"><!--icon--></th>
            <th width="46%">{% trans "Name" %}</th>
            <th width="10%"><!--op--></th>
            <th width="20%">{% trans "Size" %}</th>
            <th width="20%">{% trans "Last Update" %}</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <% } else { %>
    <p class="empty-tip alc">{% trans "No libraries" %}</p>
    <% } %>
</script>
<script type="text/template" id="group-item-mobile-tmpl">
    <h4 class="group-name ellipsis"><a href="#group/<%= id %>/" title="<%- name %>" class="a normal"><%- name %></a></h4>
    <% if (repos.length) { %>
    <table>
        <thead class="vh"><!--use .vh for <td> width-->
        <tr>
            <th width="4%"><!--icon--></th>
            <th width="92%">{% trans "Name" %}</th>
            <th width="4%"><!--op--></th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <% } else { %>
    <p class="empty-tip alc">{% trans "No libraries" %}</p>
    <% } %>
</script>


<script type="text/template" id="group-member-tmpl">
    <img src="<%= avatar_url %>" alt="" width="32" height="32" class="avatar-circle fleft" />
    <div class="txt">
        <p class="txt-item ellipsis" title="<%- name %>"><%- name %>
            <% if (is_owner) { %>
                <span class="group-admin-txt">{% trans "owner" %}</span>
            <% } else if (is_admin) { %>
                <span class="group-admin-txt">{% trans "admin" %}</span>
            <% } %>
        </p>
    </div>
</script>

<script type="text/template" id="group-discussion-tmpl">
    <img src="<%= avatar_url %>" alt="" width="32" height="32" class="avatar-circle fleft" />
    <div class="msg-body">
        <div class="ovhd">
            <a class="msg-username ellipsis" title="<%- user_name %>" href="<%= user_profile_url %>"><%- user_name %></a>
            <span class="msg-time" title="<%- time %>"><%- time_from_now %></span>
            <div class="msg-ops fright vh">
                <a class="msg-op sf2-icon-reply op-icon js-reply-msg" title="{% trans "Reply" %}" aria-label="{% trans "Reply" %}" href="#"></a>
                <% if (can_delete_msg) { %>
                <a class="msg-op sf2-icon-delete op-icon js-del-msg" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}" href="#"></a>
                <% } %>
            </div>
        </div>
        <div class="msg-content"><%= content_marked %></div>
    </div>
</script>

<script type="text/template" id="group-settings-content-tmpl">
<% if (is_owner) { %>
    <ul class="group-setting-list">
        <li><a href="#" class="group-setting-item sf-popover-item" data-op="rename">{% trans "Rename" %}</a></li>
        <li><a href="#" class="group-setting-item sf-popover-item" data-op="transfer">{% trans "Transfer" %}</a></li>
    </ul>
    <ul class="group-setting-list">
        <li><a href="#" class="group-setting-item sf-popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
        <li><a href="#" class="group-setting-item sf-popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
    </ul>
    <ul class="last-group-setting-list">
        <li><a href="#" class="group-setting-item sf-popover-item" data-op="dismiss">{% trans "Dismiss" %}</a></li>
    </ul>
<% } else if (is_admin) { %>
    <ul class="group-setting-list">
        <li><a href="#" class="group-setting-item sf-popover-item" data-op="rename">{% trans "Rename" %}</a></li>
    </ul>
    <ul class="last-group-setting-list">
        <li><a href="#" class="group-setting-item sf-popover-item" data-op="import-members">{% trans "Import Members" %}</a></li>
        <li><a href="#" class="group-setting-item sf-popover-item" data-op="manage-members">{% trans "Manage Members" %}</a></li>
    </ul>
<% } else { %>
    <ul class="last-group-setting-list">
        <li><a href="#" class="group-setting-item sf-popover-item" data-op="leave">{% trans "Leave group" %}</a></li>
    </ul>
<% } %>
</script>

<script type="text/template" id="group-rename-form-tmpl">
<form method="post" action="">
    <h3 id="dialogTitle">{% trans "Rename Group To" %}</h3>
    <input type="text" name="new_name" value="" class="input" /><br />
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit" %}" />
</form>
</script>

<script type="text/template" id="group-transfer-form-tmpl">
<form method="post" action="">
    <h3 id="dialogTitle">{% trans "Transfer Group To" %}</h3>
    <input type="hidden" name="email" /><br />
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit" %}" />
</form>
</script>
<script type="text/template" id="group-import-members-form-tmpl">
<form enctype="multipart/form-data" method="post" action="">
    <h3 id="dialogTitle">{% trans "Import group members from a CSV file" %}</h3>
    <input type="file" name="file" />
    <p class="tip">{% trans "File format: user@mail.com" %}</p>
    <button type="submit" class="submit">{% trans "Submit" %}</button>
    <p class="error hide"></p>
</form>
</script>

<script type="text/template" id="group-manage-members-tmpl">
<h3 id="dialogTitle"><%= title %></h3>
<form method="post" action="" id="add-group-members-form">
    <input type="hidden" name="user_name" />
    <input type="submit" value="{% trans "Add" %}" class="submit" />
</form>
{% if enable_guest_invitation and user.permissions.can_invite_guest %}
<a href="{{ SITE_ROOT }}#invitations/" class="invite-link-in-popup">
    <span aria-hidden="true" class="sf2-icon-invite vam"></span>
    <span class="vam">{% trans "Invite People" %}</span>
</a>
{% endif %}
<div class="members">
    <table>
        <thead>
            <% if (is_owner) { %>
            <tr>
                <th width="5%"></th>
                <th width="60%">{% trans "Name" %}</th>
                <th width="25%">{% trans "Role" %}</th>
                <th width="10%"><!--Operations--></th>
            </tr>
            <% } else { %>
            <tr>
                <th width="5%"></th>
                <th width="85%">{% trans "Name" %}</th>
                <th width="10%"><!--Operations--></th>
            </tr>
            <% } %>
        </thead>
        <tbody></tbody>
    </table>
    <span class="loading-icon loading-tip"></span>
    <p class="error hide"></p>
</div>
</script>

<script type="text/template" id="group-manage-member-tmpl">
<td>
    <img src="<%= avatar_url %>" alt="" width="20" class="avatar" />
</td>
<td>
    <a href="{{ SITE_ROOT }}profile/<% print(encodeURIComponent(email)); %>/"><%- name %></a>
</td>

<% if (is_owner) { %>
    <% if (username == email) { %>
        <td></td>
    <% } else { %>
    <td>
    <% if (is_admin) { %>
        <span class="cur-role">{% trans "Admin" %}</span>
        <span title="{% trans "Edit" %}" class="role-edit-icon sf2-icon-edit op-icon vh"></span>
        <select name="role" class="role-edit hide">
            <option value="0">{% trans "Member" %}</option>
            <option value="1" selected="selected">{% trans "Admin" %}</option>
        </select>
    <% } else { %>
        <span class="cur-role">{% trans "Member" %}</span>
        <span title="{% trans "Edit" %}" class="role-edit-icon sf2-icon-edit op-icon vh"></span>
        <select name="role" class="role-edit hide">
            <option value="0" selected="selected">{% trans "Member" %}</option>
            <option value="1">{% trans "Admin" %}</option>
        </select>
    <% } %>
    </td>
    <% } %>
<% } %>

<% if (username == email) { %>
    <td></td>
<% } else { %>
    <% if (is_owner) { %>
        <td><span class="sf2-icon-x2 op-icon vh rm" title="{% trans "Delete" %}"></span></td>
    <% } else { %>
        <% if (is_admin) { %>
            <td></td>
        <% } else { %>
            <td><span class="sf2-icon-x2 op-icon vh rm" title="{% trans "Delete" %}"></span></td>
        <% } %>
    <% } %>
<% } %>
</script>

<script type="text/template" id="repo-shared-links-admin-dialog-tmpl">
    <h3 id="dialogTitle"><%= title %></h3>
    <div id="repo-shared-links" class="nav-con-tabs js-tabs">
        <ul class="nav-con-tabs-nav">
            <% if (can_generate_share_link) { %>
            <li class="tab"><a href="#js-download-links" class="a">{% trans "Share Links" %}</a></li>
            <% } %>
            <% if (can_generate_upload_link) { %>
            <li class="tab"><a href="#js-upload-links" class="a">{% trans "Upload Links" %}</a></li>
            <% } %>
        </ul>

        <div class="nav-con-tabs-content">
            <% if (can_generate_share_link) { %>
            <div id="js-download-links" class="tabs-panel">
                <table>
                    <thead>
                    <tr>
                        <th width="6%"><!--icon--></th>
                        <th width="40%">{% trans "Name"%}</th>
                        <th width="21%">{% trans "Created By"%}</th>
                        <th width="15%">{% trans "Size"%}</th>
                        <th width="12%">{% trans "Visits"%}</th>
                        <th width="6%"><!--op--></th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <span class="loading-icon loading-tip"></span>
                <p class="error hide"></p>
            </div>
            <% } %>
            <% if (can_generate_upload_link) { %>
            <div id="js-upload-links" class="tabs-panel hide">
                <table>
                    <thead>
                    <tr>
                        <th width="6%"><!--icon--></th>
                        <th width="40%">{% trans "Name"%}</th>
                        <th width="21%">{% trans "Created By"%}</th>
                        <th width="15%">{% trans "Size"%}</th>
                        <th width="12%">{% trans "Visits"%}</th>
                        <th width="6%"><!--op--></th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <span class="loading-icon loading-tip"></span>
                <p class="error hide"></p>
            </div>
            <% } %>
        </div>
    </div>
</script>
<script type="text/template" id="repo-shared-link-tmpl">
    <% if (share_type == 'd') { %>
    <td class="alc"><img src="<%= icon_url %>" alt="{% trans "Directory icon"%}" width="24" /></td>
    <td><a href="#my-libs/lib/<%= repo_id %><%= encoded_path %>"><%- name %></a></td>
    <% } else { %>
    <td class="alc"><img src="<%= icon_url %>" alt="{% trans "File"%}" width="24" /></td>
    <td><a href="{{SITE_ROOT}}lib/<%= repo_id %>/file<%= encoded_path %>"><%- name %></a></td>
    <% } %>
    <td><a href="{{SITE_ROOT}}profile/<% print(encodeURIComponent(create_by)); %>/"><%- creator_name %></a></td>
    <td><%= formattedSize %></td>
    <td><%= view_count %></td>
    <td>
        <a href="#" class="sf2-icon-delete op-icon vh rm-link" title="{% trans "Remove"%}"></a>
    </td>
</script>

<script type="text/template" id="repo-transfer-form-tmpl">
<form method="post" action="" id="repo-transfer-form">
    <h3 id="dialogTitle"><%= title %></h3>
    <input type="hidden" name="email" /><br />
    <p class="error hide"></p>
    <input type="submit" value="{% trans "Submit" %}" />
</form>
</script>

<script type="text/template" id="repo-folder-perm-admin-dialog-tmpl">
    <h3 id="dialogTitle"><%= title %></h3>
    <div id="repo-folder-perm" class="nav-con-tabs js-tabs">
        <ul class="nav-con-tabs-nav">
            <li class="tab"><a href="#js-repo-user-folder-perm" class="a">{% trans "User Permission" %}</a></li>
            <li class="tab"><a href="#js-repo-group-folder-perm" class="a">{% trans "Group Permission" %}</a></li>
        </ul>

        <div class="nav-con-tabs-content">
            <div id="js-repo-user-folder-perm" class="tabs-panel">
                <div class="js-folder-perm-content repo-folder-perm-content">
                <table>
                    <thead>
                    <tr>
                        <th width="32%">{% trans "User" %}</th>
                        <th width="32%">{% trans "Folder" %}</th>
                        <th width="26%">{% trans "Permission" %}</th>
                        <th width="10%"><!--op--></th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input name="emails" type="hidden" class="w100" /></td>
                            <td>
                                <div class="pos-rel">
                                    <input type="text" name="folder_path" class="repo-folder-perm-folder-path" />
                                    <span title="{% trans "Select a folder" %}" class="js-add-folder repo-folder-perm-add-folder sf2-icon-plus"></span>
                                </div>
                            </td>
                            <td>
                                <select name="permission" class="folder-perm-select w100">
                                    <option value="rw" selected="selected">{% trans "Read-Write"%}</option>
                                    <option value="r">{% trans "Read-Only"%}</option>
                                    {% if is_pro %}
                                    <option value="cloud-edit">{% trans "Preview-Edit-on-Cloud" %}</option>
                                    <option value="preview">{% trans "Preview-on-Cloud" %}</option>
                                    {% endif %}
                                </select>
                            </td>
                            <td>
                                <button class="js-user-perm-add-submit">{% trans "Submit" %}</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <span class="loading-icon loading-tip"></span>
                <p class="error hide"></p>
                </div>
                <form class="js-folder-select-form hide" action="">
                    <h4>{% trans "Select a folder" %}</h4>
                    <div class="js-jtree-container"></div>
                    <input type="hidden" name="dst_path" value="" />
                    <p class="error hide"></p>
                    <button type="submit" class="submit js-folder-select-submit">{% trans "Submit" %}</button>
                    <button type="button" class="js-folder-select-cancel">{% trans "Cancel"%}</button>
                </form>
            </div>
            <div id="js-repo-group-folder-perm" class="tabs-panel hide">
                <div class="js-folder-perm-content repo-folder-perm-content">
                <table>
                    <thead>
                    <tr>
                        <th width="32%">{% trans "Group" %}</th>
                        <th width="32%">{% trans "Folder" %}</th>
                        <th width="26%">{% trans "Permission" %}</th>
                        <th width="10%"><!--op--></th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <select name="groups" class="w100" multiple="multiple"></select>
                            </td>
                            <td>
                                <div class="pos-rel">
                                    <input type="text" name="folder_path" class="repo-folder-perm-folder-path" />
                                    <span title="{% trans "Select a folder" %}" class="js-add-folder repo-folder-perm-add-folder sf2-icon-plus"></span>
                                </div>
                            </td>
                            <td>
                                <select name="permission" class="folder-perm-select w100">
                                    <option value="rw" selected="selected">{% trans "Read-Write"%}</option>
                                    <option value="r">{% trans "Read-Only"%}</option>
                                    {% if is_pro %}
                                    <option value="cloud-edit">{% trans "Preview-Edit-on-Cloud" %}</option>
                                    <option value="preview">{% trans "Preview-on-Cloud" %}</option>
                                    {% endif %}
                                </select>
                            </td>
                            <td>
                                <button class="js-group-perm-add-submit">{% trans "Submit" %}</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <span class="loading-icon loading-tip"></span>
                <p class="error hide"></p>
                </div>
                <form class="js-folder-select-form hide" action="">
                    <h4>{% trans "Select a folder" %}</h4>
                    <div class="js-jtree-container"></div>
                    <input type="hidden" name="dst_path" value="" />
                    <p class="error hide"></p>
                    <button type="submit" class="submit js-folder-select-submit">{% trans "Submit" %}</button>
                    <button type="button" class="js-folder-select-cancel">{% trans "Cancel"%}</button>
                </form>
            </div>
        </div>
    </div>
</script>

<script type="text/template" id="repo-change-password-form-tmpl">
    <form id="repo-change-passwd-form" action="" method="post">
        <h3 id="dialogTitle"><%= title %></h3>
        <label for="passwd">{% trans "Old Password" %}</label><br />
        <input type="password" name="old_passwd" class="input" id="passwd" /><br />
        <label for="new-passwd">{% trans "New Password" %}</label><span class="tip">{% blocktrans %}(at least {{repo_password_min_length}} characters){% endblocktrans %}</span><br />
        <input type="password" name="new_passwd" class="input" id="new-passwd" /><br />
        <label for="new-passwd-again">{% trans "New Password Again" %}</label><br />
        <input type="password" name="new_passwd_again" class="input" id="new-passwd-again" /><br />
        <p class="error hide"></p>
        <button type="submit" class="submit">{% trans "Submit" %}</button>
    </form>
</script>

<script type="text/template" id="device-item-tmpl">
    <td><%- platform %></td>
    <td><%- device_name %></td>
    <td><%- last_login_ip %></td>
    <td><time title='<%- time %>'><%- time_from_now %></time></td>
    <td>
        <div>
            <span class="unlink-device op-icon sf2-icon-delete vh" title="{% trans "Unlink" %}"></span>
        </div>
    </td>
</script>

<script type="text/template" id="notice-popover-tmpl">
    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
    <div class="sf-popover-hd ovhd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon fright"></a>
        <h3 class="sf-popover-title">{% trans "Notifications" %}</h3>
    </div>
    <div class="sf-popover-con">
        <div class="loading-icon loading-tip"></div>
        <p class="error alc hide"></p>
        <ul class="hide notice-list"></ul>
        <a href="{% url 'user_notification_list' %}" class="view-all">{% trans "See All Notifications" %}</a>
    </div>
</script>

<script type="text/template" id="user-info-popup-tmpl">
    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
    <div class="sf-popover-con">
        <div class="item ovhd">
            {% avatar request.user 36 %}
            <div class="txt">
                <%- app.pageOptions.name %>
            </div>
        </div>
        <div class="loading-icon loading-tip"></div>
        <p class="error alc hide"></p>
        <div id="space-traffic" class="hide"></div>
        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
        {% if request.user.is_staff %}
        <a href="{% url 'sysadmin' %}" title="{% trans "System Admin" %}" class="item">{% trans "System Admin" %}</a>
        {% endif %}
        {% if request.user.org and request.user.org.is_staff %}
        <a href="{% url 'org_user_admin'%}" title="{% trans "Admin" %}" class="item">{% trans "Organization Admin" %}</a>
        {% endif %}
        {% if request.user.inst_admin %}
        <a href="{% url "institutions:useradmin" %}" title="{% trans "Admin" %}" class="item">{% trans "Admin" %}</a>
        {% endif %}
        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
    </div>
</script>

<script type="text/template" id="confirm-dialog-with-extra-option-tmpl">
    <h3 id="dialogTitle"><%= title %></h3>
    <p><%= content %></p>
    <% if (is_pro) { %>
    <p>
        <label class="checkbox-label">
            <input type="checkbox" name="confirm-extra-option" id="confirm-extra-option" class="vam" />
            <span class="checkbox-option vam"><%= extraOption %></span>
        </label>
    </p>
    <% } %>
</script>

<script type="text/template" id="share-admin-repos-tmpl">
<div class="cur-view-path">
    <h3>{% trans "Libraries" %}</h3>
</div>
<div class="cur-view-main-con">
    <span class="loading-icon loading-tip"></span>
    <table class="hide">
        <thead>
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="33%"><a class="table-sort-op by-name" href="#">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></a></th>
                <th width="30%">{% trans "Share To" %}</th>
                <th width="29%">{% trans "Permission" %}</th>
                <th width="4%"></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "You have not shared any libraries" %}</h2>
        <p>{% trans "You can share libraries with your friends and colleagues by clicking the share icon of your own libraries in your home page or creating a new library in groups you are in." %}</p>
    </div>
    <p class="error error-tip hide"></p>
</div>
</script>

<script type="text/template" id="share-admin-repo-tmpl">
    <td><img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" /></td>
    <td><a href="<%= url %>" class="normal"><%- name %></a></td>
    <% if (share_type == 'personal') { %>
    <td title="<%- contact_email %>"><%- user_name %></td>
    <% } else if (share_type == 'group') { %>
    <td><%- group_name %></td>
    <% } else if (share_type == 'public') { %>
    <td>{% trans "all members"%}</td>
    <% } %>
    <td>
        <% if (show_admin) { %>
            <% if (is_admin) { %>
                <span class="cur-perm">{% trans "Admin" %}</span>
                <a href="#" title="{% trans "Edit" %}" class="perm-edit-icon sf2-icon-edit op-icon vh"></a>
                <select class="perm-select select-white hide">
                    <option value="rw">{% trans "Read-Write" %}</option>
                    <option value="r">{% trans "Read-Only" %}</option>
                    <option value="admin" selected="selected">{% trans "Admin" %}</option>
                    <option value="cloud-edit">{% trans "Preview-Edit-on-Cloud" %}</option>
                    <option value="preview">{% trans "Preview-on-Cloud" %}</option>
                </select>
            <% } else { %>
                <span class="cur-perm"><%= cur_perm_text %></span>
                <a href="#" title="{% trans "Edit" %}" class="perm-edit-icon sf2-icon-edit op-icon vh"></a>
                <select class="perm-select select-white hide">
                    <option value="rw" <% if (share_permission == 'rw') { %>selected="selected"<% } %>>{% trans "Read-Write" %}</option>
                    <option value="r" <% if (share_permission == 'r') { %>selected="selected"<% } %>>{% trans "Read-Only" %}</option>
                    <option value="admin">{% trans "Admin" %}</option>
                    <option value="cloud-edit" <% if (share_permission == 'cloud-edit') { %>selected="selected"<% } %>>{% trans "Preview-Edit-on-Cloud" %}</option>
                    <option value="preview" <% if (share_permission == 'preview') { %>selected="selected"<% } %>>{% trans "Preview-on-Cloud" %}</option>
                </select>
            <% } %>
        <% } else { %>
            <span class="cur-perm"><%= cur_perm_text %></span>
            <a href="#" title="{% trans "Edit" %}" class="perm-edit-icon sf2-icon-edit op-icon vh"></a>
            <select class="perm-select select-white hide">
                <option value="rw" <% if (share_permission == 'rw') { %>selected="selected"<% } %>>{% trans "Read-Write" %}</option>
                <option value="r" <% if (share_permission == 'r') { %>selected="selected"<% } %>>{% trans "Read-Only" %}</option>
                {% if is_pro %}
                <option value="cloud-edit" <% if (share_permission == 'cloud-edit') { %>selected="selected"<% } %>>{% trans "Preview-Edit-on-Cloud" %}</option>
                <option value="preview" <% if (share_permission == 'preview') { %>selected="selected"<% } %>>{% trans "Preview-on-Cloud" %}</option>
                {% endif %}
            </select>
        <% } %>
    </td>
    <td>
        <a href="#" class="unshare op-icon sf2-icon-delete vh" title="{% trans "Unshare" %}"></a>
    </td>
</script>

<script type="text/template" id="share-admin-folder-tmpl">
    <td><img src="<%= icon_url %>" title="<%= icon_title %>" alt="<%= icon_title %>" width="24" /></td>
    <td><a href="<%= url %>" class="normal"><%- name %></a></td>
    <% if (share_type == 'personal') { %>
    <td title="<%- contact_email %>"><%- user_name %></td>
    <% } else if (share_type == 'group') { %>
    <td><%- group_name %></td>
    <% } else if (share_type == 'public') { %> {# no 'public' type for 'folder' #}
    <td>{% trans "all members"%}</td>
    <% } %>
    <td>
        <span class="cur-perm"><%= cur_perm_text %></span>
        <a href="#" title="{% trans "Edit" %}" class="perm-edit-icon sf2-icon-edit op-icon vh"></a>
        <select class="perm-select select-white hide">
            <option value="rw" <% if (share_permission == 'rw') { %>selected="selected"<% } %>>{% trans "Read-Write" %}</option>
            <option value="r" <% if (share_permission == 'r') { %>selected="selected"<% } %>>{% trans "Read-Only" %}</option>
            {% if is_pro %}
            <option value="cloud-edit" <% if (share_permission == 'cloud-edit') { %>selected="selected"<% } %>>{% trans "Preview-Edit-on-Cloud" %}</option>
            <option value="preview" <% if (share_permission == 'preview') { %>selected="selected"<% } %>>{% trans "Preview-on-Cloud" %}</option>
            {% endif %}
        </select>
    </td>
    <td>
        <a href="#" class="unshare op-icon sf2-icon-delete vh" title="{% trans "Unshare" %}"></a>
    </td>
</script>

<script type="text/template" id="share-admin-folders-tmpl">
<div class="cur-view-path">
    <h3>{% trans "Folders" %}</h3>
</div>
<div class="cur-view-main-con">
    <span class="loading-icon loading-tip"></span>
    <table class="hide">
        <thead>
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="33%"><a class="table-sort-op by-name" href="#">{% trans "Name" %} <span class="sort-icon icon-caret-down hide"></span></a></th>
                <th width="30%">{% trans "Share To" %}</th>
                <th width="29%">{% trans "Permission" %}</th>
                <th width="4%"></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "You have not shared any folders" %}</h2>
        <p>{% trans "You can share a single folder with a registered user if you don't want to share a whole library." %}</p>
    </div>
    <p class="error error-tip hide"></p>
</div>
</script>

<script type="text/template" id="share-admin-download-links-tmpl">
<div class="cur-view-path ovhd">
    <ul class="tab-tabs-nav fleft">
        <li class="tab ui-state-active">
            <a href="#share-admin-share-links/" class="a">{% trans "Share Links" %}</a>
        </li>
        <% if (app.pageOptions.can_generate_upload_link) { %>
        <li class="tab">
            <a href="#share-admin-upload-links/" class="a">{% trans "Upload Links" %}</a>
        </li>
        <% } %>
    </ul>
</div>
<div class="cur-view-main-con">
    <span class="loading-icon loading-tip"></span>
    <table class="hide">
        <thead>
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="40%"><a class="table-sort-op by-name" href="#">{% trans "Name"%} <span class="sort-icon icon-caret-up"></span></a></th>
                <th width="25%">{% trans "Library" %}</th>
                <th width="11%">{% trans "Visits" %}</th>
                <th width="12%"><a class="table-sort-op by-time" href="#">{% trans "Expiration" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a></th>
                <th width="8%"><!--Operations--></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "You don't have any share links" %}</h2>
        <p>{% trans "You can generate a share link for a folder or a file. Anyone who receives this link can view the folder or the file online." %}</p>
    </div>
    <p class="error error-tip hide"></p>
</div>
</script>

<script type="text/template" id="share-admin-upload-links-tmpl">
<div class="cur-view-path ovhd">
    <ul class="tab-tabs-nav fleft">
        <% if (app.pageOptions.can_generate_share_link) { %>
        <li class="tab">
            <a href="#share-admin-share-links/" class="a">{% trans "Share Links" %}</a>
        </li>
        <% } %>
        <li class="tab ui-state-active">
            <a href="#share-admin-upload-links/" class="a">{% trans "Upload Links" %}</a>
        </li>
    </ul>
</div>
<div class="cur-view-main-con">
    <span class="loading-icon loading-tip"></span>
    <table class="hide">
        <thead>
            <tr>
                <th width="4%"><!--icon--></th>
                <th width="44%">{% trans "Name" %}</th>
                <th width="30%">{% trans "Library" %}</th>
                <th width="12%">{% trans "Visits" %}</th>
                <th width="10%"><!--Operations--></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "You don't have any upload links" %}</h2>
        <p>{% trans "You can generate an upload link from any folder. Anyone who receives this link can upload files to this folder." %}</p>
    </div>
    <p class="error error-tip hide"></p>
</div>
</script>

<script type="text/template" id="share-admin-download-link-tmpl">
    <td><img src="<%= icon_url %>" width="24" alt="" /></td>
    <td><a href="<%= dirent_url %>" class="normal"><%- obj_name %></a></td>
    <td><a href="#common/lib/<%= repo_id %>" class="normal"><%- repo_name %></a></td>
    <td><%= view_cnt %></td>
    <% if (expire_date) { %>
        <% if (is_expired) { %>
        <td class="error"><%= time %></td>
        <% } else { %>
        <td><%= time %></td>
        <% } %>
    <% } else { %>
    <td>--</td>
    <% } %>
    <td>
        <a href="#" class="sf2-icon-link view-link op-icon vh" title="{% trans "View" %}"></a>
        <a href="#" class="sf2-icon-delete rm-link op-icon vh" title="{% trans "Remove" %}"></a>
    </td>
</script>

<script type="text/template" id="share-admin-upload-link-tmpl">
    <td><img src="<%= icon_url %>" width="24" alt="" /></td>
    <td><a href="<%= dirent_url %>" class="normal"><%- obj_name %></a></td>
    <td><a href="#common/lib/<%= repo_id %>" class="normal"><%- repo_name %></a></td>
    <td><%= view_cnt %></td>
    <td>
        <a href="#" class="sf2-icon-link view-link op-icon vh" title="{% trans "View"%}"></a>
        <a href="#" class="sf2-icon-delete rm-link op-icon vh" title="{% trans "Remove"%}"></a>
    </td>
</script>

<script type="text/template" id="share-admin-link-popup-tmpl">
    <div>
        <p><%= link %></p>
        <input type="text" readonly="readonly" value="<%= link %>" class="shared-link hide" />
    </div>
</script>

<script type="text/template" id="invitations-toolbar-tmpl">
<button id="invite-people" class="btn-white hidden-sm-down"><span aria-hidden="true" class="icon-plus-square add vam"></span><span class="vam">{% trans "Invite People" %}</span></button>
<span id="invite-people" class="hidden-md-up sf2-icon-plus2 mobile-icon" aria-label="{% trans "Invite People" %}"></span>
</script>
<script type="text/template" id="invitations-tmpl">
<div class="cur-view-path">
    <h3>{% trans "Invite People" %}</h3>
</div>
<div class="cur-view-main-con">
    <span class="loading-icon loading-tip"></span>
    <table class="hide">
        <thead>
            <tr>
                <th width="35%">{% trans "Email" %}</th>
                <th width="20%">{% trans "Invite Time" %}</th>
                <th width="20%">{% trans "Expiration" %}</th>
                <th width="18%">{% trans "Accepted" %}</th>
                <th width="7%"><!--Operations--></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="empty-tips hide">
        <h2 class="alc">{% trans "You have not invited any people." %}</h2>
    </div>
    <p class="error error-tip hide"></p>
</div>
</script>

<script type="text/template" id="invitation-item-tmpl">
    <td><%- accepter %></td>
    <td><time title='<%= invite_time_format %>'><%= invite_time_from_now %></time></td>
    <td><time title='<%= expire_time_format %>'><%= expire_time_from_now %></time></td>
    <% if (accept_time) { %>
    <td><span class="sf2-icon-tick tick-green"></span></td>
    <td></td>
    <% } else { %>
    <td></td>
    <td><a href="#" class="sf2-icon-delete rm-invitation op-icon vh" title="{% trans "Remove" %}"></a></td>
    <% } %>
</script>

<script type="text/template" id="invitation-form-tmpl">
    <form id="invitation-form" action="" method="post">{% csrf_token %}
        <h3 id="dialogTitle">{% trans "Invite People" %}</h3>
        <label for="accepter">{% trans "Email" %}</label><br/>
        <input id="accepter" type="text" name="accepter" value="" class="input" placeholder="{% trans "Emails, separated by ','"%}" title="{% trans "Emails, separated by ','"%}" /><br />
        <p class="error hide"></p>
        <input type="submit" value="{% trans "Submit" %}" class="submit vam" />
        <span class="loading-icon vam" style="margin-left:5px;display:none;"></span>
    </form>
</script>

{# file comment #}
<script type="text/template" id="file-comment-panel-tmpl">
    <div class="comments-panel-hd">
        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf-popover-close js-close sf2-icon-x1 op-icon"></a>
        <h3 class="comments-panel-title">
            <img src="<%= icon_url %>" width="24" alt="" class="vam" />
            <span class="vam ellipsis file-comment-panel-item-name" title="<%- file_name %>"><%- file_name %></span>
        </h3>
    </div>
    <div class="comments-panel-con file-discussions-con">
        <div class="loading-icon loading-tip"></div>
        <ul class="file-discussion-list hide"></ul>
        <p class="no-discussion-tip hide">{% trans "No comment yet." %}</p>
        <p class="error hide"></p>
    </div>
    <div class="comments-panel-footer">
        <form action="" method="post" class="msg-form">
            <img src="{% avatar_url request.user 64 %}" alt="" width="32" height="32" class="avatar-circle fleft" />
            <div class="msg-body">
                <textarea name="message" placeholder="{% trans "Add a comment..." %}" title="{% trans "Add a comment..." %}" aria-label="{% trans "Add a comment..." %}" class="msg-input"></textarea>
                <p class="error hide"></p>
                <button type="submit" class="submit msg-submit">{% trans "Submit" %}</button>
            </div>
        </form>
    </div>
</script>
<script type="text/template" id="file-comment-tmpl">
<img src="<%= avatar_url %>" alt="" width="32" height="32" class="avatar-circle fleft" />
<div class="msg-body">
    <div class="ovhd">
        <a class="msg-username ellipsis" title="<%- user_name %>" href="<%= user_profile_url %>"><%- user_name %></a>
        <span class="msg-time" title="<%- time %>"><%- time_from_now %></span>
        <div class="msg-ops fright vh">
            <a class="msg-op sf2-icon-reply op-icon js-reply-msg" title="{% trans "Reply" %}" aria-label="{% trans "Reply" %}" href="#"></a>
            <% if (can_delete_msg) { %>
                <a class="msg-op sf2-icon-delete op-icon js-del-msg" title="{% trans "Delete" %}" aria-label="{% trans "Delete" %}" href="#" data-id="<%= id %>"></a>
            <% } %>
        </div>
    </div>
    <div class="msg-content"><%= content_marked %></div>
</div>
</script>
<script type="text/template" id="smart-link-tmpl">
    <div class="smart-link-container">
        <h3 id="dialogTitle">{% trans "Internal link" %}</h3>
        <p class="smart-link-help">
            <span>
                {% trans "An internal link is a link to a file or folder that can be accessed by users with read permission to the file or folder." %}
            </span>
        </p>
        <div class="smart-link-wraper">
            <div class="smart-link-loading"></div>
            <a target="_blank" class="smart-link-href" href=""></a>
        </div>
        <div class="smart-link-operation">
            <button class="smart-link-copy">{% trans "Copy" %}</button>
            <button class="smart-link-close">{% trans "Close" %}</button>
        </div>
        <!-- used to copy text to clipBoard-->
        <div class="input-copy-wrapper">
            <input class="copy-input" type="text">
        </div>
    </div>
</script>
